diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css
similarity index 98%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css
index 48bcc9e756b..2747960b965 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/appImage.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/AppImage/appImage.css
@@ -31,7 +31,6 @@
     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/DataTable/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx
index 1ccd6f433dd..7869a8fe74b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx
@@ -16,13 +16,7 @@
  * under the License.
  */
 
-import Theme from '../../../theme';
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import DataTableRow from './DataTableRow';
-import DataTableHeader from './DataTableHeader';
-import RaisedButton from 'material-ui/RaisedButton';
-import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
 
 /**
  * The Custom Table Component.
@@ -53,8 +47,6 @@ class DataTable extends Component {
 
     constructor() {
         super();
-        this.handleRowClick = this.handleRowClick.bind(this);
-        this.handleBtnClick = this.handleBtnClick.bind(this);
         this.state = {
             data: [],
             headers: [],
@@ -62,92 +54,21 @@ class DataTable extends Component {
         this.scriptId = "data-table"
     };
 
-    componentWillMount() {
-        console.log("Will mount", this.props.data); //TODO: Remove this
-        this.setState({data: this.props.data, headers: this.props.headers}, Theme.insertThemingScripts(this.scriptId));
-
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        if (!nextProps.data) {
-            this.setState({data: nextState.data});
-            return true;
-        }
-        this.setState({data: nextProps.data});
-        return true;
-    }
-
     /**
      * Triggers when user click on table row.
      * This method invokes the parent method handleRowClick, which is passed via props.
      * */
-    handleRowClick(id) {
-        this.props.handleRowClick(id);
-    }
-
-    handleBtnClick(id) {
-        this.props.onAppEditClick(id);
-    }
 
     render() {
-        const {data, headers} = this.state;
-
-        //TODO: Remove this
-        console.log(data);
-
-        let noDataContent = null;
-
-        if (this.props.noDataMessage.type === 'button') {
-            noDataContent = <div><RaisedButton label={this.props.noDataMessage.text}/></div>
-        }
+        return (
+            <div className="data-table">
+                {this.props.children}
+            </div>
+        )
 
-        if (data) {
-            return (<Table
-                selectable={false}>
-                <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
-                    <TableRow>
-                        {headers.map((header) => {
-                                return (
-                                    <DataTableHeader
-                                        key={header.data_id}
-                                        className="datatableRowColumn"
-                                        header={header}
-                                    />
-                                )}
-                        )}
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {data.map((dataItem) => {
-                        return (
-                            <DataTableRow
-                                key={dataItem.id}
-                                dataItem={dataItem}
-                                handleButtonClick={this.handleBtnClick}
-                                handleClick={this.handleRowClick}
-                            />
-                        )
-                    })}
-                </TableBody>
-            </Table>)
-        }
-        return (<div>{noDataContent}</div>);
     }
 }
 
-DataTable.prototypes = {
-    data: PropTypes.arrayOf(Object),
-    headers: PropTypes.arrayOf(Object),
-    sortData: PropTypes.func,
-    handleRowClick: PropTypes.func,
-    noDataMessage: PropTypes.object
-};
+DataTable.prototypes = {};
 
 export default DataTable;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx
index 52fb8bb771e..bad2de74508 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
+import {Col, Row} from "reactstrap";
 
 /**
  * Data Table header component.
@@ -55,33 +56,25 @@ class DataTableHeader extends Component {
     }
 
     render() {
-        let headerCell = null;
-
-        /**
-         * If the header is sortable, create a button with onClick handler.
-         * else create a span element with label as the table header.
-         * */
-        if (this.props.header.sortable) {
-            headerCell =
-                <FlatButton
-                    label={this.props.header.label}
-                    onClick={this.tableHeaderClick}
-                    className="sortableHeaderCell"
-                />
-        } else {
-            headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
-        }
+        /*margin-top: 30px
+        * margin-bottom: 10px
+        * */
 
         return (
-            <TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn">
-                {headerCell}
-            </TableHeaderColumn>
+            <Row className="data-table-header">
+                {this.props.headers.map(header => {
+
+                    let headerStyle = header.size;
+
+                    return <Col className={headerStyle}>{header.label}</Col>
+                })}
+            </Row>
         );
     }
 }
 
 DataTableHeader.prototypes = {
-    header: PropTypes.object
+    headers: PropTypes.array
 };
 
 export default DataTableHeader;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx
index 9046c2cbb44..7e250b0e43c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx
@@ -23,6 +23,7 @@ import IconButton from 'material-ui/IconButton';
 import Create from 'material-ui/svg-icons/content/create'
 import {TableRow, TableRowColumn} from 'material-ui/Table';
 import Avatar from 'material-ui/Avatar';
+import {Row} from "reactstrap";
 
 
 /**
@@ -68,38 +69,12 @@ class DataTableRow extends Component {
 
     render() {
         const {dataItem} = this.state;
+
+        //height: 62px
         return (
-            <TableRow
-                key={this.props.key}
-                onClick={this.handleClick.bind(this)}
-            >
-                <TableRowColumn
-                    className="datatableRowColumn"
-                    key={Math.random()}
-                >
-                    <Avatar>{dataItem.name}</Avatar>
-                </TableRowColumn>
-                {Object.keys(dataItem).map((key) => {
-                    if (key !== 'id') {
-                        return (
-                            <TableRowColumn
-                                className="datatableRowColumn"
-                                key={key}
-                            >
-                                {dataItem[key]}
-                            </TableRowColumn>)
-                    }
+            <Row className="data-table-row">
 
-                })}
-                <TableRowColumn
-                    className="datatableRowColumn"
-                    key={dataItem.id}
-                >
-                    <IconButton id={dataItem.id} onClick={this.handleBtnClick.bind(this)}>
-                        <Create id={dataItem.id}/>
-                    </IconButton>
-                </TableRowColumn>
-            </TableRow>
+            </Row>
         );
     }
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/HeaderCell.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/HeaderCell.js
new file mode 100644
index 00000000000..9462ec8e5bb
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/HeaderCell.js
@@ -0,0 +1,80 @@
+/*
+ * 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 Theme from '../../../theme';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import FlatButton from 'material-ui/FlatButton';
+import {TableHeaderColumn} from 'material-ui/Table';
+import {Col, Row} from "reactstrap";
+
+/**
+ * Data Table header component.
+ * This component creates the header elements of the table.
+ * */
+class HeaderCell extends Component {
+
+    constructor() {
+        super();
+        this.tableHeaderClick = this.tableHeaderClick.bind(this);
+        this.scriptId = "data-table";
+    }
+
+    componentWillMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        Theme.insertThemingScripts(this.scriptId);
+    }
+
+    componentWillUnmount() {
+        Theme.removeThemingScripts(this.scriptId);
+
+    }
+
+    /**
+     * The onClick function of the table header.
+     * Invokes the function passed in the header object.
+     * */
+    tableHeaderClick() {
+        this.props.header.sort();
+    }
+
+    render() {
+        /*margin-top: 30px
+        * margin-bottom: 10px
+        * */
+
+        return (
+            <Row className="data-table-header">
+                {this.props.headers.map(header => {
+
+                    let headerStyle = header.size;
+
+                    return <Col className={headerStyle}>{header.label}</Col>
+                })}
+            </Row>
+        );
+    }
+}
+
+DataTableHeader.prototypes = {
+    headers: PropTypes.array
+};
+
+export default HeaderCell;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css
similarity index 90%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css
index eea79c5b694..37fabd76b68 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/drawer.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css
@@ -25,21 +25,19 @@
     right: 0%;
     background-color: #ffffff;
     overflow-x: hidden; /* Disable horizontal scroll */
-    padding-top: 60px; /* Place content 60px from the top */
+    padding: 60px 0px 0 5px; /* Place content 60px from the top */
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
     box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.app-view-drawer a {
+.drawer-close-btn {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
-    font-size: 25px;
     color: #818181;
     display: block;
     transition: 0.3s
 }
 
-
 /* Position and style the close button (top right corner) */
 .app-view-drawer .closebtn {
     position: absolute;
@@ -49,9 +47,8 @@
     margin-left: 50px;
 }
 
-.drawer-close-btn {
-    height: 40px;
-    width: 30px;
+.drawer-close-btn i {
+    font-size: 14px;
 }
 
 .drawer-close-btn:hover {
@@ -67,7 +64,8 @@
 
 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 @media screen and (max-height: 450px) {
-    .sidenav {padding-top: 15px;}
-    .sidenav a {font-size: 18px;}
+    .sidenav {
+        padding-top: 15px;
+    }
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
similarity index 74%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
index 5cc8756320f..1f483c87133 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/floatingButton.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/floatingButton.css
@@ -16,23 +16,24 @@
  * under the License.
  */
 
+/*
+ * Material design based Floating button.
+ */
 .btn-circle {
     color: white;
     position: relative;
-    background-color: #e65100;
     border-radius: 50%;
-    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    text-align: center;
+    box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px
 }
 
 .btn-circle i {
-    position: absolute;
-    margin-top: 37%;
-    margin-left: 37%;
+    margin-top: 40%;
 }
 
 .small {
-    height: 50px;
-    width: 50px;
+    height: 56px;
+    width: 56px;
 }
 
 .medium {
@@ -40,11 +41,6 @@
     width: 100px;
 }
 
-.btn-circle:hover {
-    cursor: pointer;
-    background-color: rgb(255, 93, 2);
-}
-
 .primary {
     background-color: blue;
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/imageUploader.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/imageUploader.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/ImageUploader/imageUploader.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/notification.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/notification.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Notifications/notification.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/switch.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/switch.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Switch/switch.css