diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
index 220dd790f5..c40ae23086 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
@@ -20,12 +20,9 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../api/authHandler";
-import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
-import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
 import ApplicationCreate from '../Application/Create/ApplicationCreate';
-import {Button, Input, InputGroup, Popover, PopoverContent, PopoverTitle,} from 'reactstrap';
-import NotificationItem from '../UIComponents/Notifications/NotificationItem';
-
+import {Button, Col, Input, Row,} from 'reactstrap';
+import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
 
 /**
  * Base Layout:
@@ -43,6 +40,7 @@ class BaseLayout extends Component {
             openModal: false
         };
         this.logout = this.logout.bind(this);
+        this.closeModal = this.closeModal.bind(this);
     }
 
     handleApplicationClick() {
@@ -50,6 +48,7 @@ class BaseLayout extends Component {
     }
 
     handleApplicationCreateClick(event) {
+        console.log("dsfds");
         event.preventDefault();
         event.stopPropagation();
         this.setState({openModal: true});
@@ -67,6 +66,10 @@ class BaseLayout extends Component {
         AuthHandler.logout();
     }
 
+    closeModal() {
+        this.setState({openModal: false});
+    }
+
     render() {
         return (
             <div id="container">
@@ -76,36 +79,35 @@ class BaseLayout extends Component {
                             WSO2 IoT App Publisher
                         </span>
                         <div id="header-btn">
-                            <Button className="btn-notification" id="btn"><NotificationsIcon/></Button>
-                            <Button className="btn-account" id="btn"><ActionAccountCircle/></Button>
+                            <i className="fw fw-notification btn-header"></i>
+                            <i className="fw fw-user btn-header"></i>
                         </div>
                     </div>
                     <div id="search-box">
-                        <InputGroup>
-                            <Input
-                                id="search"
-                                name="search"
-                                placeholder={'Search for Applications'}
-                                onChange={(event) => console.log(event.target.value)}
-                            />
-                        </InputGroup>
+                        <i className="fw fw-search search-icon">
+                        </i>
+                        <Input
+                            id="search"
+                            name="search"
+                            placeholder={'Search for Applications'}
+                            onChange={(event) => console.log(event.target.value)}
+                        />
                     </div>
                     <div id="add-btn-container">
-                        <Button
-                            id="add-btn"
-                            onClick={this.handleApplicationCreateClick.bind(this)}
-                        >
-                            <h3>
-                                <strong>+</strong>
-                            </h3>
-                        </Button>
+                        <FloatingButton className="add-btn small" onClick={this.handleApplicationCreateClick.bind(this)}/>
                     </div>
                 </div>
 
+
                 <div id="application-content" style={this.state.style}>
-                    {this.props.children}
+                    <Row>
+                        <Col>
+                            {this.props.children}
+                        </Col>
+                    </Row>
+
                 </div>
-                <ApplicationCreate open={this.state.openModal}/>
+                <ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
             </div>
         );
     }
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 7b10c366c0..96d39fbe3f 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
@@ -19,13 +19,9 @@
 import Theme from '../../theme';
 import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
-import AuthHandler from "../../api/authHandler";
-import ApplicationMgtApi from '../../api/applicationMgtApi';
-import {Button, Row, Table} from 'reactstrap';
+import {Button, Col, Row, Table} from 'reactstrap';
 import Drawer from '../UIComponents/Drawer/Drawer';
 import ApplicationView from './View/ApplicationView';
-import NotificationView from "../UIComponents/Notifications/NotificationView";
-import AppImage from "../UIComponents/AppImage/AppImage";
 
 /**
  * The App Create Component.
@@ -53,7 +49,10 @@ class ApplicationListing extends Component {
             drawer: {},
             appListStyle: {},
             image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"},
-                {id: "2", src:"http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"}]
+                {
+                    id: "2",
+                    src: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"
+                }]
         };
         this.scriptId = "application-listing";
     }
@@ -131,15 +130,15 @@ class ApplicationListing extends Component {
          *Loading the theme files based on the the user-preference.
          */
         Theme.insertThemingScripts(this.scriptId);
-        let getApps = ApplicationMgtApi.getApplications();
-        getApps.then(response => {
-            let apps = this.setData(response.data.applications);
-            console.log(apps); //TODO: Remove this.
-            this.setState({searchedApplications: apps});
-            // console.log(this.setState({data: response.data}), console.log(this.state));
-        }).catch(err => {
-            AuthHandler.unauthorizedErrorHandler(err);
-        });
+        // let getApps = ApplicationMgtApi.getApplications();
+        // getApps.then(response => {
+        //     let apps = this.setData(response.data.applications);
+        //     console.log(apps); //TODO: Remove this.
+        //     this.setState({searchedApplications: apps});
+        //     // console.log(this.setState({data: response.data}), console.log(this.state));
+        // }).catch(err => {
+        //     AuthHandler.unauthorizedErrorHandler(err);
+        // });
     }
 
     /**
@@ -218,7 +217,7 @@ class ApplicationListing extends Component {
         this.props.history.push("apps/edit/fdsfdsf343");
     }
 
-        remove(imageId) {
+    remove(imageId) {
         let tmp = this.state.image;
 
         console.log(imageId);
@@ -248,44 +247,61 @@ class ApplicationListing extends Component {
         return (
 
             <div id="application-list" style={this.state.appListStyle}>
-                <Table striped hover>
-                    <thead>
-                    <tr>
-                        <th></th>
-                        {/* TODO: Remove console.log and add sort method. */}
-                        <th onClick={() => {console.log("sort")}}>Application Name</th>
-                        <th>Category</th>
-                        <th>Platform</th>
-                        <th>Status</th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {this.applications.map(
-                        (application) => {
-                            return (
-                                <tr key={application.id} onClick={this.onRowClick}>
-                                    <td>
-                                        {/* TODO: Move this styles to css. */}
-                                        <img
-                                            src={application.icon}
-                                            height='50px'
-                                            width='50px'
-                                            style={{border: 'solid 1px black', borderRadius: "100%"}}
-                                        />
-                                    </td>
-                                    <td>{application.applicationName}</td>
-                                    <td>{application.category}</td>
-                                    <td>{application.platform}</td>
-                                    <td>{application.status}</td>
-                                    <td><Button onClick={this.handleButtonClick}>Edit</Button></td>
-                                </tr>
-                            )
-                        }
-                    )}
-                    </tbody>
-                </Table>
-
+                <Row>
+                    <Col xs="3 offset-9">
+                        <div className="platform-link-placeholder">
+                            <Button><i className="fw fw-settings"></i> Platforms</Button>
+                        </div>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col>
+                        <Table striped hover>
+                            <thead>
+                            <tr>
+                                <th></th>
+                                {/* TODO: Remove console.log and add sort method. */}
+                                <th onClick={() => {
+                                    console.log("sort")
+                                }}>Application Name
+                                </th>
+                                <th>Category</th>
+                                <th>Platform</th>
+                                <th>Status</th>
+                                <th></th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {this.applications.map(
+                                (application) => {
+                                    return (
+                                        <tr key={application.id} onClick={this.onRowClick}>
+                                            <td>
+                                                {/* TODO: Move this styles to css. */}
+                                                <img
+                                                    src={application.icon}
+                                                    height='50px'
+                                                    width='50px'
+                                                    style={{border: 'solid 1px black', borderRadius: "100%"}}
+                                                />
+                                            </td>
+                                            <td>{application.applicationName}</td>
+                                            <td>{application.category}</td>
+                                            <td>{application.platform}</td>
+                                            <td>{application.status}</td>
+                                            <td>
+                                                <Button onClick={this.handleButtonClick}>
+                                                    <i className="fw fw-edit"></i>
+                                                </Button>
+                                            </td>
+                                        </tr>
+                                    )
+                                }
+                            )}
+                            </tbody>
+                        </Table>
+                    </Col>
+                </Row>
                 <Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
                     <ApplicationView/>
                 </Drawer>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
index 38b5d26102..2a2a151538 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
@@ -21,7 +21,7 @@ import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../../api/authHandler";
 import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
 import ApplicationMgtApi from '../../../api/applicationMgtApi';
-import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
+import {Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row} from 'reactstrap';
 
 /**
  * The App Create Component.
@@ -61,12 +61,12 @@ class ApplicationCreate extends Component {
     }
 
     close() {
-        this.setState({open: false, stepIndex: 0})
+        this.props.close();
     }
 
     handleBack() {
         let currentStep = this.state.stepIndex;
-        let nextStep = currentStep === 0 ? currentStep : currentStep - 1 ;
+        let nextStep = currentStep === 0 ? currentStep : currentStep - 1;
         this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
     }
 
@@ -88,7 +88,7 @@ class ApplicationCreate extends Component {
     handleSubmit() {
         let stepData = this.state.stepData;
         let applicationCreationPromise = ApplicationMgtApi.createApplication(stepData);
-        applicationCreationPromise.then( response => {
+        applicationCreationPromise.then(response => {
                 this.handleYes();
             }
         ).catch(
@@ -216,10 +216,21 @@ class ApplicationCreate extends Component {
                        backdrop={'static'}>
                     <ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
                     <ModalBody id="modal-body-content">
-                        {this.getStepContent(this.state.stepIndex)}
+                        <Row>
+                            <Col>
+                                <div className="stepper-header">
+
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                {this.getStepContent(this.state.stepIndex)}
+                            </Col>
+                        </Row>
                     </ModalBody>
                     <ModalFooter>
-                        {this.state.stepIndex === 0? <div/> :
+                        {this.state.stepIndex === 0 ? <div/> :
                             <Button color="primary" onClick={this.handlePrev}>Back</Button>}
                         <Button color="secondary" onClick={this.close}>Cancel</Button>
                         {this.state.finished ?
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
index 8776efafd8..731b23ef10 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
@@ -79,7 +79,12 @@ class ApplicationEdit extends Component {
         return (
             <div id="application-edit-base">
                 <Row id="application-edit-header">
-                    <Col>Application Name</Col>
+                    <Col xs="3">
+                        <a className="back-to-app"><i className="fw fw-left"></i></a>
+                    </Col>
+                    <Col>
+                        Application Name
+                    </Col>
                 </Row>
                 <Row id="application-edit-main-container">
                     <Col xs="3">
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
index 3ee209b3e5..0c5b460a9d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
@@ -16,20 +16,11 @@
  * under the License.
  */
 
-#application-edit-base {
-    width: 70%;
-    margin: 0 auto;
-    height: 100%;
-    background-color: #f6f6f6;
-    border: solid 1px #828282;
-}
 
 #application-edit-header {
     height: 50px;
     width: 100%;
     margin: 0;
-    background-color: #9a9a9a;
-    border: solid 1px #a2a2a2;
     font-size: 20px;
 }
 
@@ -60,8 +51,7 @@
 /*Tab styling*/
 div.tab {
     float: left;
-    border: 1px solid #ccc;
-    background-color: #f1f1f1;
+    border-right: 1px solid #d8d8d8;
     height: 100%;
 }
 
@@ -81,13 +71,14 @@ div.tab button {
 
 /* Change background color of buttons on hover */
 div.tab button:hover {
-    background-color: #ddd;
+    background-color: #ddd6d7;
     cursor: pointer;
 }
 
 /* Create an active/current "tab button" class */
 div.tab button.active {
-    background-color: #ccc;
+    background-color: #1b3bcc;
+    color: white;
 }
 
 
@@ -109,3 +100,12 @@ div.tab button.active {
     height: 100%;
     position: relative;
 }
+
+.back-to-app {
+    position: absolute;
+}
+
+.back-to-app:hover {
+    cursor: pointer;
+    background-color: #888888;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
index d0fecb6e6f..22503fdf8c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
@@ -76,8 +76,15 @@ class ApplicationView extends Component {
                         </Col>
                     </Row>
                     <Row>
-                        <Col>Rating</Col>
-                        <Col>View in Store</Col>
+                        <Col>
+                            <i className="fw fw-star"></i>
+                            <i className="fw fw-star"></i>
+                            <i className="fw fw-star"></i>
+                            <i className="fw fw-star"></i>
+                        </Col>
+                        <Col>
+                            <a href="#">View in Store</a>
+                        </Col>
                     </Row>
                 </div>
                 <hr/>
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 9a419ccc18..3c7f21c2e1 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
@@ -42,7 +42,7 @@ class Drawer extends Component {
         return (
             <div>
                 <div id="app-view" className="app-view-drawer" style={this.props.style}>
-                    <a onClick={this.closeDrawer} className="drawer-close-btn">&times;</a>
+                    <a onClick={this.closeDrawer} className="drawer-close-btn"><i className="fw fw-uncheck"></i></a>
                     {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/UIComponents/Drawer/drawer.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Drawer/drawer.css
index e1281614a5..aa7e71f856 100644
--- 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/src/components/UIComponents/Drawer/drawer.css
@@ -23,11 +23,10 @@
     z-index: 1; /* Stay on top */
     top: 5%;
     right: 0%;
-    background-color: #b5b5b5;
+    background-color: #ffffff;
     overflow-x: hidden; /* Disable horizontal scroll */
     padding-top: 60px; /* Place content 60px from the top */
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
-    border: solid 1px black;
     box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
index 750b93911b..7e4a275863 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
@@ -54,8 +54,7 @@ body {
     height: 100px;
     width: 100%;
     margin: 0 10px 0 0;
-    background-color: #BDBDBD;
-    border-bottom: solid 2px;
+    background-color: #3b33bd;
     position: fixed; /* Set the navbar to fixed position */
     top: 0; /* Position the navbar at the top of the page */
     z-index: 2;
@@ -63,21 +62,17 @@ body {
 }
 
 #application-content {
-    max-height: 800px;
-    margin-top: 150px;
+    height: auto;
+    width: 80%;
+    margin: 150px auto;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 10px 10px 10px 10px;
 }
 
-#add-btn {
-    border-radius: 50%;
-    border: solid 2px;
+.add-btn {
     position: absolute;
-    background-color: #BDBDBD;
-    left: 15px;
-    top: 75px;
-    cursor: pointer;
-    height: 50px;
-    width: 50px;
-    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    left:12%;
+    top: 35px;
 }
 
 .add-btn.div {
@@ -90,12 +85,14 @@ body {
     content: '\e601';
 }
 
-#btn {
-    background-color: #BDBDBD;
-    border-color: #BDBDBD;
+.btn-header {
+    margin-top: 10px;
+    margin-right: 20px;
+    color: white;
 }
 
 #header-text {
+    color: #ffffff;
     font-size: 25px;
     top: 10px;
     margin-left: 10px;
@@ -105,21 +102,47 @@ body {
     float: right;
 }
 
+.search-icon {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+}
+
 #search-box {
+    display: flex;
+    color: #a8a8a8;
+    position: relative;
     float: right;
+    top: 35px;
+    margin-right: 10px;
 }
 
 #search {
-    background-color: #BDBDBD;
-    left: 110px;
-    top: 20px;
+    position: relative;
+    color: white;
+    background-color: transparent;
+    left: 15px;
+    top: 0px;
     height: 25px;
     outline: none;
     border: none;
-    border-bottom: solid 1px black;
     border-radius: 0%;
 }
 
+.stepper-header {
+    width: 100%;
+    border-bottom: solid 1px cornflowerblue;
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+}
+
+.platform-link-placeholder {
+    color: #888888;
+    float: right;
+    margin-right: 20px;
+    padding-bottom: 10px;
+}
+
 #application-list {
     margin-top: 20px;
     transition: margin-right .5s;