diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
index e7d27b5f748..a95ca6c8ddd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
@@ -31,32 +31,6 @@
 
     <build>
         <plugins>
-            <plugin>
-                <groupId>org.wso2.maven</groupId>
-                <artifactId>carbon-p2-plugin</artifactId>
-                <version>${carbon.p2.plugin.version}</version>
-                <executions>
-                    <execution>
-                        <id>4-p2-feature-generation</id>
-                        <phase>package</phase>
-                        <goals>
-                            <goal>p2-feature-gen</goal>
-                        </goals>
-                        <configuration>
-                            <id>org.wso2.carbon.device.application.mgt</id>
-                            <propertiesFile>../../etc/feature.properties</propertiesFile>
-                            <adviceFile>
-                                <properties>
-                                    <propertyDef>org.wso2.carbon.p2.category.type:server
-                                    </propertyDef>
-                                    <propertyDef>org.eclipse.equinox.p2.type.group:false
-                                    </propertyDef>
-                                </properties>
-                            </adviceFile>
-                        </configuration>
-                    </execution>
-                </executions>
-            </plugin>
             <plugin>
                 <groupId>org.codehaus.mojo</groupId>
                 <artifactId>exec-maven-plugin</artifactId>
@@ -96,8 +70,15 @@
                     <workingDirectory>${npm.working.dir}</workingDirectory>
                 </configuration>
             </plugin>
-
         </plugins>
+        <resources>
+            <resource>
+                <directory>${project.build.directory}/target</directory>
+            </resource>
+            <resource>
+                <directory>src/main/resources</directory>
+            </resource>
+        </resources>
     </build>
     <profiles>
         <profile>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/config.json
new file mode 100644
index 00000000000..3be10b8ce9b
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/config.json
@@ -0,0 +1,6 @@
+{
+  "theme": {
+    "type": "default",
+    "value": "lightBaseTheme"
+  }
+}
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 0e627f4af56..efce6b8d1c0 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
@@ -39,11 +39,11 @@
     <title>WSO2 IoT App Publisher</title>
   </head>
   <body>
-    <script src='./dist/index.js'></script>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <script src='./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/public/themes/default/application-create-step1.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css
new file mode 100644
index 00000000000..0fbc5e2be8e
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.creatediv {
+    margin: 0 16px;
+}
+
+.nextButton {
+    margin-top: 12px;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css
new file mode 100644
index 00000000000..00da1e2e107
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationCreateChip {
+    margin: 4px;
+}
+
+.createStep2Content {
+    margin: 0 16px;
+}
+
+
+.applicationCreateWrapper {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.platformSpecificPropertyDiv {
+    border: solid #BDBDBD 1px;
+}
+
+.platformSpecificPropertyP {
+    color: #BDBDBD;
+}
+
+.applicationCreateBannerError {
+    color: #f44336;
+}
+
+.applicationCreateBannerTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateBannerDropZone {
+    width: 300px;
+    height: 150px;
+    border: dashed #BDBDBD 1px
+}
+
+.applicationCreateBannerp {
+    margin: 70px 40px 40px 150px;
+}
+
+.applicationCreateScreenshotError {
+    color: #f44336;
+}
+
+.applicationCreateScreenshotTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateScreenshotGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateScreenshotDropZone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.applicationCreateScreenshotp {
+    margin: 70px 40px 70px 70px;
+}
+
+.applcationCreateIconError {
+    color: #f44336;
+}
+
+.applicationCreateIconTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateIconGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateIconDropZone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.applicationCreateIconp {
+    margin: 70px 40px 70px 70px;
+}
+
+.applicationCreateBackAndNext {
+    margin-top: 12px;
+}
+
+.applicationCreateBack {
+    margin-right: 12px;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css
new file mode 100644
index 00000000000..beca46d5dc6
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationCreateStepMiddle {
+    margin: 0 16px;
+}
+
+.applicationCreateBackAndFinish {
+    margin-top: 12px;
+}
+
+.applicationCreateFinish {
+    margin-right: 12px;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css
new file mode 100644
index 00000000000..2fc0e368e92
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.createapplicationmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.creataapplicationcard {
+    max-height: 700px;
+    overflow: auto;
+}
+.createapplicationcardaction {
+    width: 100%;
+    margin: auto;
+}
+
+.createapplicationcontent {
+    margin: 0 16px;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css
new file mode 100644
index 00000000000..ff6b17bc79b
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationListingMiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.applicationListingCard {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.applicationListingSearch {
+    float:right;
+    padding-right: 2px;
+}
+
+.applicationListTitle {
+    display: flex;
+    flex-wrap: wrap;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css
new file mode 100644
index 00000000000..ccc768c3ca3
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.basicLayoutDiv {
+    height: calc(100% - 64px);
+    margin-left: 16%;
+    width: calc(100% - 15%);
+    top: 64px;
+    left: -100px;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css
new file mode 100644
index 00000000000..849d232eb21
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.tableRow {
+    display: flex;
+}
+
+.datatableRowColumn {
+    align-items: center;
+}
+
+.sortableHeaderCell {
+    color: #bdbdbd;
+}
+
+.notsortableHeaderCell {
+    position: relative;
+    padding-left: 16px;
+    padding-right: 16px;
+    text-transform: uppercase;
+    font-weight: normal;
+    color: #bdbdbd;
+    font-size: 14px;
+}
+
+.datatableHeaderColumn {
+    padding-left: 0;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
new file mode 100644
index 00000000000..483cdedbffa
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.createplatformmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%
+}
+
+.createplatformcardaction {
+    width: 100%;
+    margin: auto;
+    padding-left: 10px;
+}
+
+.createplatformproperties {
+    color: #BaBaBa;
+}
+
+.createplatformpropertyclose {
+    height: 10px;
+    width: 10px;
+}
+
+
+.createplatformproperty {
+    display: flex;
+}
+
+.createplatformpropertyselect {
+    flex: 1 1 23% 1;
+    margin: 0 1%
+}
+
+.createplatformicon {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.createplatformiconp {
+    color: #BDBDBD;
+}
+
+.createplatformdropzone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.createplatformdropzonep {
+    margin: 70px 40px 70px 70px
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css
new file mode 100644
index 00000000000..d9d9d594c3b
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+.listingplatformmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.listingplatformcard {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.listingplatformsearch {
+    float:right;
+    padding-right: 2px;
+}
+
+.listingplatformTitle {
+    display: flex;
+    flex-wrap: wrap;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 58002cfb62d..9dac4fa9c29 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -31,20 +31,11 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
+import Theme from './theme';
+
+
 const history = createHistory({basename: '/publisher'});
 
-/**
- * User can define the themes in the config.json. The themes will be loaded based on the user preference.
- */
-const theme = require("./config.json").theme;
-let muiTheme = null;
-if (theme.current === "default") {
-    let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
-    muiTheme = getMuiTheme(defaultTheme.default);
-} else {
-    let customTheme = require("./themes/" + theme.custom);
-    muiTheme = getMuiTheme(customTheme.default);
-}
 
 /**
  * This component defines the layout and the routes for the app.
@@ -101,10 +92,59 @@ class Base extends Component {
  *
  * */
 class Publisher extends Component {
+    constructor() {
+        super();
+        this.state = {
+            muiTheme: null,
+            selectedType: null,
+            selectedTheme: null
+        };
+        this.setTheme = this.setTheme.bind(this);
+    }
+
+    componentDidMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        let themeConfig = Theme.loadThemeConfigs();
+        themeConfig.then(this.setTheme).catch(function (error) {
+            console.log(error);
+
+        });
+    }
+
+    /**
+     * To set the theme based on the configuration file.
+     * @param response Configuration file data.
+     */
+    setTheme(response) {
+        this.setState({
+            selectedType: response.data.theme.type,
+            selectedTheme: response.data.theme.value
+        });
+
+        Theme.currentThemeType = this.state.selectedType;
+        Theme.currentTheme = this.state.selectedTheme;
+        Theme.selectedTheme =
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
+
+        if (this.state.selectedType === "default") {
+            let defaultTheme = require("material-ui/styles/baseThemes/" + this.state.selectedTheme);
+            this.setState({
+                muiTheme : getMuiTheme(defaultTheme.default)
+            });
+        } else {
+            let customTheme = require("./themes/" + this.state.selectedTheme);
+            this.setState({
+                muiTheme : getMuiTheme(customTheme.default)
+            });
+        }
+
+    }
     render() {
         return (
             <div className="App">
-                <MuiThemeProvider muiTheme={muiTheme}>
+                <MuiThemeProvider muiTheme={this.state.muiTheme}>
                 <Router basename="publisher" history={history}>
                     <Switch>
                         <Route path="/login" component={Login}/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 86ad0961ff6..870ed0cdb9f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -24,7 +24,7 @@ import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-
+import Theme from '../../theme';
 
 /**
  * The App Create Component.
@@ -37,6 +37,7 @@ import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
 class ApplicationCreate extends Component {
     constructor() {
         super();
+        this.scriptId = "application-create";
         this.setStepData.bind(this);
         this.removeStepData.bind(this);
         this.handleSubmit.bind(this);
@@ -51,6 +52,17 @@ class ApplicationCreate extends Component {
         };
     }
 
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
+    }
+
     /**
      * Handles next button click event.
      * */
@@ -179,15 +191,15 @@ class ApplicationCreate extends Component {
 
 
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
-                <Card style={{maxHeight: '700px', overflow: 'auto'}}>
+            <div className="middle createapplicationmiddle">
+                <Card className="creataapplicationcard">
                     <CardTitle title="Create Application"/>
 
                     {/**
                      * The stepper goes here.
                      */}
                     <CardActions>
-                        <div style={{width: '100%', margin: 'auto'}}>
+                        <div className="createapplicationcardaction">
                             <Stepper activeStep={stepIndex}>
                                 <Step>
                                     <StepLabel>Select Application Platform</StepLabel>
@@ -199,7 +211,7 @@ class ApplicationCreate extends Component {
                                     <StepLabel>Release</StepLabel>
                                 </Step>
                             </Stepper>
-                            <div style={contentStyle}>
+                            <div className="createapplicationcontent">
                                 {finished ? (
                                     <div>
                                         <p>Create App?</p>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index d0df14fb181..fcceb20ca5b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -21,6 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import Theme from '../../theme';
 
 /**
  * The App Create Component.
@@ -36,7 +37,8 @@ class ApplicationListing extends Component {
         this.state = {
             data: [],
             asc: true
-        }
+        };
+        this.scriptId = "application-listing";
     }
 
     data = [
@@ -112,8 +114,18 @@ class ApplicationListing extends Component {
     componentWillMount() {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
+
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
     }
 
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
+    }
+
+
     /**
      * Handles the search action.
      * When typing in the search bar, this method will be invoked.
@@ -156,12 +168,11 @@ class ApplicationListing extends Component {
 
     render() {
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
-                <Card style={{display: 'flex', flexWrap: 'wrap'}}>
-                    <TextField hintText="Search"
-                               style={{float:'right', paddingRight: '2px'}}
+            <div className="middle applicationListingMiddle">
+                <Card className="applicationListingCard">
+                    <TextField hintText="Search" className="applicationListingSearch"
                                onChange={this._searchApplications.bind(this)}/>
-                    <CardTitle title="Applications" style={{display: 'flex', flexWrap: 'wrap'}}/>
+                    <CardTitle title="Applications" className="applicationListTitle"/>
                     <CardActions>
 
                     </CardActions>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 971821d063c..f414a8c278c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -19,9 +19,9 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import MenuItem from 'material-ui/MenuItem';
-import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+import Theme from '../../../theme';
 
 /**
  * The first step of the application creation wizard.
@@ -48,10 +48,18 @@ class Step1 extends Component {
             title: "",
             titleError: ""
         };
+        this.scriptId = "application-create-step1";
     }
 
     componentWillMount() {
-        //Get the list of available platforms and set to the state.
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+       Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
@@ -105,10 +113,9 @@ class Step1 extends Component {
     };
 
     render() {
-        const contentStyle = {margin: '0 16px'};
         return (
             <div>
-                <div style={contentStyle}>
+                <div className="creatediv">
                     <div>
                         <div>
                             <SelectField
@@ -134,7 +141,7 @@ class Step1 extends Component {
 
                         <br/>
                         <br/>
-                        <div style={{marginTop: 12}}>
+                        <div className="nextButton">
                             <RaisedButton
                                 label="Next >"
                                 primary={true}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 5d0591dd2ea..198055a0925 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -28,6 +28,7 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
+import Theme from '../../../theme';
 
 /**
  * The Second step of application create wizard.
@@ -66,18 +67,19 @@ class Step2 extends Component {
             screenshots: [],
             icon: []
         };
+        this.scriptId = "application-create-step2";
+    }
 
-        this.styles = {
-            chip: {
-                margin: 4,
-            },
-            wrapper: {
-                display: 'flex',
-                flexWrap: 'wrap',
-            },
-        };
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
     }
 
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
+    }
 
     /**
      * Create a tag on Enter key press and set it to the state.
@@ -142,8 +144,7 @@ class Step2 extends Component {
             <Chip
                 key={data.key}
                 onRequestDelete={() => this._handleRequestDelete(data.key)}
-                style={this.styles.chip}
-            >
+                className="applicationCreateChip">
                 {data.value}
             </Chip>
         );
@@ -299,9 +300,8 @@ class Step2 extends Component {
 
     render() {
         console.log(this.state.visibilityComponent);
-        const contentStyle = {margin: '0 16px'};
         return (
-            <div style={contentStyle}>
+            <div className="createStep2Content">
                 <div>
                     <div>
                         <TextField
@@ -353,7 +353,7 @@ class Step2 extends Component {
                             onChange={this._handleTagChange.bind(this)}
                             onKeyPress={this._addTags.bind(this)}
                         /><br/>
-                        <div style={this.styles.wrapper}>
+                        <div className="applicationCreateWrapper">
                             {this.state.tags.map(this._renderChip, this)}
                         </div>
                         <br/>
@@ -365,18 +365,14 @@ class Step2 extends Component {
                             <MenuItem value={0} primaryText="Business"/>
                         </SelectField> <br/>
                         {/*Platform Specific Properties.*/}
-                        <div style={{border: 'solid #BDBDBD 1px'}}>
-                            <p style={{color: '#BDBDBD'}}>Platform Specific Properties</p>
+                        <div className="platformSpecificPropertyDiv">
+                            <p className="platformSpecificPropertyP">Platform Specific Properties</p>
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Banner"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Banner*:</p>
-                            <GridList style={{
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
+                            <p className="applicationCreateBannerError">{this.state.errors["Banner"]}</p>
+                            <p className="applicationCreateBannerTitle">Banner*:</p>
+                            <GridList className="applicationCreateGrid" cols={1.1}>
                                 {this.state.banner.map((tile) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={tile.name}
@@ -387,12 +383,11 @@ class Step2 extends Component {
                                         <img src={tile.preview}/></GridTile>
                                 ))}
                                 {this.state.banner.length === 0 ?
-                                    <Dropzone style={{width: '300px', height: '150px', border: 'dashed #BDBDBD 1px'}}
-                                              accept="image/jpeg, image/png"
+                                    <Dropzone className="applicationCreateBannerDropZone" accept="image/jpeg, image/png"
                                               onDrop={(banner, rejected) => {
                                                   this.setState({banner, rejected});
                                               }}>
-                                    <p style={{margin: '70px 40px 40px 150px'}}>+</p>
+                                    <p className="applicationCreateBannerp">+</p>
                                 </Dropzone> : <div />}
 
                             </GridList>
@@ -400,13 +395,9 @@ class Step2 extends Component {
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Screenshots"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Screenshots*:</p>
-                            <GridList style={{
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
+                            <p className="applicationCreateScreenshotError">{this.state.errors["Screenshots"]}</p>
+                            <p className="applicationCreateScreenshotTitle">Screenshots*:</p>
+                            <GridList className = "applicationCreateScreenshotGrid" cols={1.1}>
                                 {this.state.screenshots.map((file) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={file[0].name}
@@ -417,7 +408,7 @@ class Step2 extends Component {
                                         <img src={file[0].preview}/></GridTile>
                                 ))}
                                 {this.state.screenshots.length < 3 ?
-                                    <Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
+                                    <Dropzone className="applicationCreateScreenshotDropZone"
                                               accept="image/jpeg, image/png"
                                               onDrop={(screenshots, rejected) => {
                                                   let tmpScreenshots = this.state.screenshots;
@@ -425,19 +416,15 @@ class Step2 extends Component {
                                                   this.setState({
                                                       screenshots: tmpScreenshots});
                                               }}>
-                                    <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                    <p className="applicationCreateScreenshotp">+</p>
                                 </Dropzone> : <div />}
                             </GridList>
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Icon*:</p>
-                            <GridList style={{
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
+                            <p className="applcationCreateIconError">{this.state.errors["Icon"]}</p>
+                            <p className="applicationCreateIconTitle">Icon*:</p>
+                            <GridList className="applicationCreateIconGrid" cols={1.1}>
                                 {this.state.icon.map((tile) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={tile.name}
@@ -448,10 +435,10 @@ class Step2 extends Component {
                                         <img src={tile.preview}/></GridTile>
                                 ))}
                                 {this.state.icon.length === 0 ?
-                                    <Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
+                                    <Dropzone className="applicationCreateIconDropZone"
                                               accept="image/jpeg, image/png"
                                               onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
-                                    <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                    <p className="applicationCreateIconp">+</p>
                                 </Dropzone> : <div />}
                             </GridList>
                         </div>
@@ -460,12 +447,12 @@ class Step2 extends Component {
 
                     <br/>
                     <br/>
-                    <div style={{marginTop: 12}}>
+                    <div className="applicationCreateBackAndNext">
                         <FlatButton
                             label="< Back"
                             disabled={false}
                             onClick={this._handlePrev.bind(this)}
-                            style={{marginRight: 12}}
+                            className="applicationCreateBack"
                         />
                         <RaisedButton
                             label="Next >"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index 677f7e309d3..1245d1df3c1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -24,6 +24,7 @@ import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+import Theme from '../../../theme';
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -54,7 +55,19 @@ class Step3 extends Component {
             showForm: false,
             releaseChannel: 1,
             errors: {}
-        }
+        };
+        this.scriptId = "application-create-step3";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+       Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
@@ -81,9 +94,8 @@ class Step3 extends Component {
     }
 
     render() {
-        const contentStyle = {margin: '0 16px'};
         return (
-            <div style={contentStyle}>
+            <div className="applicationCreateStepMiddle">
                 <div>
                     <Toggle
                         label="Release the Application"
@@ -110,13 +122,9 @@ class Step3 extends Component {
                         /><br/>
                     </div>}
 
-                    <div style={{marginTop: 12}}>
-                        <FlatButton
-                            label="< Back"
-                            disabled={false}
-                            onClick={this._handlePrev.bind(this)}
-                            style={{marginRight: 12}}
-                        />
+                    <div className="applicationCreateBackAndFinish">
+                        <FlatButton label="< Back" disabled={false} onClick={this._handlePrev.bind(this)}
+                                    className="applicationCreateFinish"/>
                         <RaisedButton
                             label="Finish"
                             primary={true}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index cc63ca13114..da98a075c52 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -27,10 +27,11 @@ import {List, ListItem} from 'material-ui/List';
 import Apps from 'material-ui/svg-icons/navigation/apps';
 import Add from 'material-ui/svg-icons/content/add-circle';
 import Feedback from 'material-ui/svg-icons/action/feedback';
-import Dashboard from 'material-ui/svg-icons/action/dashboard';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+import Theme from '../../theme';
+
 
 /**
  * Base Layout:
@@ -45,11 +46,19 @@ class BaseLayout extends Component {
         this.state = {
             notifications: 0,
             user: 'Admin'
-        }
+        };
+        this.scriptId = "basic-layout";
     }
 
     componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
 
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId)
     }
 
     handleApplicationClick() {
@@ -86,6 +95,7 @@ class BaseLayout extends Component {
 
     render() {
         return (
+
             <div>
                 <AppBar title="App Publisher"
                         iconElementRight={
@@ -142,16 +152,7 @@ class BaseLayout extends Component {
                         </List>
                     </Drawer>
                 </div>
-                <div style=
-                         {
-                             {
-                                 height: 'calc(100% - 64px)',
-                                 marginLeft: '16%',
-                                 width: 'calc(100%-15%)',
-                                 top: 64,
-                                 left: "-100px"
-                             }
-                         }>
+                <div className="basicLayoutDiv">
                     {this.props.children}
                 </div>
             </div>);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index c6604187a88..3c9c8acabf9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -31,6 +31,7 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
+import Theme from '../../theme';
 
 /**
  * Platform Create component.
@@ -61,7 +62,19 @@ class PlatformCreate extends Component {
                 {key: 1, value: 'Number'},
                 {key: 2, value: 'Boolean'},
                 {key: 3, value: 'File'}]
-        }
+        };
+        this.scriptId = "platform-create";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+       Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
@@ -184,12 +197,12 @@ class PlatformCreate extends Component {
             property} = this.state;
 
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+            <div className="middle createplatformmiddle">
                 <Card>
                     <CardTitle title="Create Platform"/>
 
                     <CardActions>
-                        <div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
+                        <div className="createplatformcardaction">
                             <form>
                                 <TextField
                                     hintText="Enter the Platform Name."
@@ -224,17 +237,17 @@ class PlatformCreate extends Component {
                                     toggled={enabled}
                                 /> <br/>
                                 <div>
-                                    <p style={{color: '#BaBaBa'}}>Platform Properties</p>
+                                    <p className="createplatformproperties">Platform Properties</p>
                                     <div id="property-container">
                                         {platformProperties.map((p) => {
                                             return <div key={p.key}>{p.key} : {p.value}
                                                 <IconButton onClick={this._removeProperty.bind(this, p)}>
-                                                    <Close style={{height: '10px', width: '10px'}}/>
+                                                    <Close className="createplatformpropertyclose"/>
                                                 </IconButton>
                                             </div>
                                         })}
                                     </div>
-                                    <div style={{display: 'flex'}}>
+                                    <div className="createplatformproperty">
                                         <TextField
                                             id="property"
                                             hintText="Property Name"
@@ -244,7 +257,7 @@ class PlatformCreate extends Component {
                                             onChange={this._onTextChange.bind(this)}
                                         /> <em/>
                                         <SelectField
-                                            style={{flex: '1 1 23% 1', margin: '0 1%'}}
+                                            className="createplatformpropertyselect"
                                             floatingLabelText="Property Type"
                                             value={selectedProperty}
                                             floatingLabelFixed={true}
@@ -262,13 +275,8 @@ class PlatformCreate extends Component {
                                     </div>
                                 </div>
                                 <div>
-                                    {/*<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>*/}
-                                    <p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
-                                    <GridList style={{
-                                        display: 'flex',
-                                        flexWrap: 'nowrap',
-                                        overflowX: 'auto',
-                                    }} cols={1.1}>
+                                    <p className="createplatformiconp">Platform Icon*:</p>
+                                    <GridList className="createplatformicon" cols={1.1}>
                                         {this.state.icon.map((tile) => (
                                             <GridTile key={Math.floor(Math.random() * 1000)}
                                                       title={tile.name}
@@ -280,12 +288,10 @@ class PlatformCreate extends Component {
                                             </GridTile>
                                         ))}
                                         {this.state.icon.length === 0 ?
-                                            <Dropzone style={
-                                                {width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}
-                                            }
+                                            <Dropzone className="createplatformdropzone"
                                                       accept="image/jpeg, image/png"
                                                       onDrop={(icon, rejected) => {this.setState({icon, rejected})}}>
-                                                <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                                <p className="createplatformdropzonep">+</p>
                                             </Dropzone> : <div />}
                                     </GridList>
                                 </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 6a749d205e5..34387fca7ea 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -21,6 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import Theme from '../../theme';
 
 /**
  * The App Create Component.
@@ -36,11 +37,19 @@ class PlatformListing extends Component {
         this.state = {
             data: [],
             asc: true
-        }
+        };
+        this.scriptId = "platform-listing";
     }
 
     componentWillMount() {
-        //Fetch all the applications from backend and create application objects.
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
@@ -75,12 +84,11 @@ class PlatformListing extends Component {
 
     render() {
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
-                <Card style={{display: 'flex', flexWrap: 'wrap'}}>
-                    <TextField hintText="Search"
-                               style={{float:'right', paddingRight: '2px'}}
-                               onChange={this._searchApplications.bind(this)}/>
-                    <CardTitle title="Platforms" style={{display: 'flex', flexWrap: 'wrap'}}/>
+            <div className= 'middle listingplatformmiddle'>
+                <Card className='listingplatformcard'>
+                    <TextField hintText="Search" onChange={this._searchApplications.bind(this)}
+                               className='listingplatformsearch'/>
+                    <CardTitle title="Platforms" className='listingplatformTitle'/>
                     <CardActions>
 
                     </CardActions>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index e82528da081..beb6086b58d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -22,6 +22,7 @@ import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
+import Theme from '../../theme';
 
 /**
  * The Custom Table Component.
@@ -55,12 +56,21 @@ class DataTable extends Component {
         this.state = {
             data: [],
             headers: [],
-        }
-
+        };
+        this.scriptId = "data-table"
     };
 
     componentWillMount() {
-        this.setState({data: this.props.data, headers: this.props.headers})
+        this.setState({data: this.props.data, headers: this.props.headers});
+
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -95,8 +105,8 @@ class DataTable extends Component {
                              adjustForCheckbox={ false }>
                     <TableRow>
                         {headers.map((header) => {
-                                return (<DataTableHeader key={header.data_id}
-                                                         style={{display: 'flex'}} header={header}/>)
+                                return (<DataTableHeader key={header.data_id} className="datatableRowColumn"
+                                                         header={header}/>)
                             }
                         )}
                     </TableRow>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 2f6285a8dda..8d655c66179 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
+import Theme from '../../theme';
 
 /**
  * Data Table header component.
@@ -29,6 +30,18 @@ class DataTableHeader extends Component {
 
     constructor() {
         super();
+        this.scriptId = "data-table";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
@@ -48,20 +61,13 @@ class DataTableHeader extends Component {
          * */
         if (this.props.header.sortable) {
             headerCell = <FlatButton label={this.props.header.label}
-                                    onClick={this._tableHeaderClick.bind(this)}
-                                    style={{color: '#bdbdbd'}}/>;
+                                    onClick={this._tableHeaderClick.bind(this)} className="sortableHeaderCell"/>;
         } else {
-            headerCell = <span style={{position: 'relative',
-                paddingLeft: '16px',
-                paddingRight: '16px',
-                textTransform: 'uppercase',
-                fontWeight: 'normal',
-                color: '#bdbdbd',
-                fontSize: '14px'}}>{this.props.header.label}</span>;
+            headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
         }
 
         return (
-            <TableHeaderColumn key={this.props.header.id} style={{paddingLeft: '0px'}} >
+            <TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn" >
                 {headerCell}
             </TableHeaderColumn>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 6a2a0d1e809..292f0e4eab6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
+import Theme from '../../theme';
 
 /**
  * Data table row component.
@@ -30,11 +31,21 @@ class DataTableRow extends Component {
         super();
         this.state = {
             dataItem: {}
-        }
+        };
+        this.scriptId = "data-table";
     }
 
     componentWillMount() {
-        this.setState({dataItem: this.props.dataItem})
+        this.setState({dataItem: this.props.dataItem});
+
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+       Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
@@ -50,7 +61,7 @@ class DataTableRow extends Component {
                 <TableRow key={this.props.key} onClick={this._handleClick.bind(this)} >
                     {Object.keys(dataItem).map((key) => {
                         if (key !== 'id') {
-                            return <TableRowColumn style={{alignItems: 'center'}}
+                            return <TableRowColumn className = "datatableRowColumn"
                                                    key={key}>{dataItem[key]}</TableRowColumn>
                         } else {
                             return <TableRowColumn key={key}/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
index cb7ead56b15..3be10b8ce9b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
@@ -1,7 +1,6 @@
 {
-  "theme" : {
-    "current" : "default",
-    "default" : "lightBaseTheme",
-    "custom" : "custom-theme"
+  "theme": {
+    "type": "default",
+    "value": "lightBaseTheme"
   }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
new file mode 100644
index 00000000000..9243f7713e1
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import axios from 'axios';
+
+/**
+ * This class will read through the configuration file and saves the theme names for the usage in other files.
+ * User can define the themes in the config.json. The themes will be loaded based on the user preference.
+ */
+class Theme {
+    constructor() {
+        this.defaultThemeType =  "default";
+        this.currentThemeType =  this.defaultThemeType;
+        this.currentTheme = "lightBaseTheme";
+        this.themeFolder =  "themes";
+        this.styleSheetType = "text/css";
+        this.styleSheetRel = "stylesheet";
+        this.selectedTheme = this.defaultThemeType;
+
+        //TODO Need to get the app context properly when the server is ready
+        this.baseURL = window.location.origin;
+        this.appContext = window.location.pathname.split("/")[1];
+        this.loadThemeConfigs.bind(this);
+        this.loadThemeFiles.bind(this);
+        this.insertThemingScripts.bind(this);
+        this.removeThemingScripts.bind(this);
+    }
+
+    /**
+     * To load the theme related configurations from the configuration file.
+     * @returns the http response.
+     */
+    loadThemeConfigs () {
+        let httpClient = axios.create({
+            baseURL: this.baseURL + "/" + this.appContext + "/config.json",
+            timeout: 2000
+        });
+        httpClient.defaults.headers.post['Content-Type'] = 'application/json';
+        return httpClient.get();
+    }
+
+    /**
+     * To load the particular theme file from the path.
+     * @param path Path to load the theme files
+     * @returns Http response from the particular file.
+     */
+    loadThemeFiles (path) {
+        let httpClient = axios.create({
+            baseURL: this.baseURL + "/" + this.appContext +  path,
+            timeout: 2000
+        });
+        return httpClient.get();
+    }
+
+    /**
+     * To insert the css files to the document.
+     * @param scriptId ID of the script that need to be inserted
+     */
+    insertThemingScripts(scriptId) {
+        const script = scriptId + ".css";
+        let themePath  =  "/" + this.themeFolder + "/" + this.selectedTheme + "/" + script;
+        let themeFile = this.loadThemeFiles(themePath);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = this.styleSheetType;
+        link.href = this.baseURL + "/" + this.appContext + themePath;
+        link.id = scriptId;
+        link.rel = this.styleSheetRel;
+        this.removeThemingScripts(scriptId);
+
+        themeFile.then(function () {
+            head.appendChild(link);
+        }).catch(error => {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + this.themeFolder + "/" + this.defaultThemeType + "/" + script;
+            link.href = this.baseURL + "/" + this.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
+
+    /**
+     * To remove the css scripts that are inserted before.
+     * @param scriptId Id of the script that need to be removed
+     */
+    removeThemingScripts(scriptId) {
+        let styleSheet = document.getElementById(scriptId);
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+    }
+
+}
+
+export default (new Theme);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
index 8342d4da36d..f8cfdff1bf4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
@@ -1,3 +1,30 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * This a sample custom theme file. In config.json, if the following changes are done, this theme will be applied.
+ * {
+ *     "theme" : {
+ *       "type" : "custom",
+ *       "value" : "custom-theme"
+ *     }
+ *   }
+ */
 import {
     indigo500, indigo700, redA200,
 } from 'material-ui/styles/colors';
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 c6483f4aaa0..e09918c7143 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
@@ -58,7 +58,12 @@ const config = {
                 }]
             }
         ]
+    },
+    resolve: {
+        // you can now require('file') instead of require('file.coffee')
+        extensions: ['.jsx', '.js']
     }
+
 };
 
 if (process.env.NODE_ENV === "development") {
