diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs
index 83b6f72333..3579228ec4 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.view/view.hbs
@@ -16,53 +16,43 @@
   under the License.
 }}
 
-{{#zone "contentTitle"}}
-    <div class="row wr-device-board">
-        <div class="col-lg-12 wr-secondary-bar">
-            <label class="device-id device-select"
-                   data-deviceid="{{device.deviceIdentifier}}" data-type="{{device.type}}"
-                   data-appcontext="{{@app.context}}">
-                Device {{device.name}}
-                {{#if device.viewModel.vendor}}
-                    <span class="lbl-device">
-                                    ( {{device.viewModel.vendor}} {{device.viewModel.model}} )
-                                </span>
-                {{/if}}
-            </label>
-        </div>
-    </div>
-{{/zone}}
-
 {{#zone "content"}}
-<div class="row no-gutter add-padding-5x add-margin-top-5x"
-     style="border: 1px solid #e4e4e4;">
-    <div class="media">
-        <div id="device_overview">
-            <div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
-                <div class="thumbnail icon">
-                    {{#defineZone "device-thumbnail"}}
-                        <i class="square-element text fw fw-mobile"></i>
-                    {{/defineZone}}
+    <h1 class="page-sub-title device-id device-select" data-deviceid="{{device.deviceIdentifier}}" data-type="{{device.type}}">
+        Device {{device.name}}
+        {{#if device.viewModel.model}}
+            <span class="lbl-device">
+                ( {{device.viewModel.vendor}} {{device.viewModel.model}} )
+            </span>
+        {{/if}}
+    </h1>
+    <div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
+        <div class="media">
+            <div id="device_overview">
+                <div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
+                    <div class="thumbnail icon">
+                        {{#defineZone "device-thumbnail"}}
+                            <i class="square-element text fw fw-mobile"></i>
+                        {{/defineZone}}
+                    </div>
                 </div>
-            </div>
-            <div class="media-body asset-desc add-padding-left-5x">
-                <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
-                    Device Overview - {{label}}</div>
-                {{unit "cdmf.unit.device.overview-section" device=device}}
-                {{#defineZone "operation-status"}}{{/defineZone}}
-                {{#defineZone "device-opetations"}}
+                <div class="media-body asset-desc add-padding-left-5x">
                     <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
-                        Operations
-                    </div>
-                    <div class="add-margin-top-4x" style="height: 90px;">
-                        {{unit "cdmf.unit.device.operation-bar" device=device}}
-                    </div>
-                {{/defineZone}}
+                        Device Overview - {{label}}</div>
+                    {{unit "cdmf.unit.device.overview-section" device=device}}
+                    {{#defineZone "operation-status"}}{{/defineZone}}
+                    {{#defineZone "device-opetations"}}
+                        <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
+                            Operations
+                        </div>
+                        <div class="add-margin-top-4x" style="height: 90px;">
+                            {{unit "cdmf.unit.device.operation-bar" device=device}}
+                        </div>
+                    {{/defineZone}}
+                </div>
             </div>
         </div>
-    </div>
 
-    {{#defineZone "device-detail-properties"}}
+        {{#defineZone "device-detail-properties"}}
         <div class="media">
             <div class="media-left col-xs-12 col-sm-2 col-md-2 col-lg-2">
                 <ul class="list-group" role="tablist">
@@ -194,7 +184,7 @@
             </div>
         </div>
     {{/defineZone}}
-</div>
+    </div>
 {{/zone}}
 {{#zone "bottomJs"}}
     {{js "js/device-view.js"}}
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-theme.css b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-theme.css
index 06c552c7e0..e7377e780c 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-theme.css
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-theme.css
@@ -488,6 +488,9 @@ form .form-group label{
     display: inline-block;
 }
 
+.panel-default.active .visible-xs .panel-title a {
+    color:#fff;
+}
 .panel-body {
     background: transparent;
     padding: 0;
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/less/theme-variables.less b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/less/theme-variables.less
index 5dcd3c3ce4..8095451680 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/less/theme-variables.less
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/less/theme-variables.less
@@ -6,7 +6,7 @@
 @base-dark-color: #11375B;
 @base-light-color: #ffffff;
 @base-success-color: #5cb85c;
-@base-info-color: #009DA7;
+@base-info-color: #526A84;
 @base-warning-color: #f0ad4e;
 @base-danger-color: #d9534f;
 
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/css/theme-wso2.css b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/css/theme-wso2.css
index 70ac36766d..a6db82b4c6 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/css/theme-wso2.css
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/uuf-template-app/app/units/uuf.unit.theme/public/css/theme-wso2.css
@@ -777,7 +777,7 @@ a.text-success:focus {
 }
 
 .text-info {
-  color: #009DA7;
+  color: #526A84;
 }
 
 a.text-info:hover,
@@ -826,7 +826,7 @@ a.bg-success:focus {
 }
 
 .bg-info {
-  background-color: #009DA7;
+  background-color: #526A84;
 }
 
 a.bg-info:hover,
@@ -2088,7 +2088,7 @@ table th[class*="col-"] {
 .table > tfoot > tr > th.info,
 .table > tfoot > tr.info > td,
 .table > tfoot > tr.info > th {
-  background-color: #009DA7;
+  background-color: #526A84;
 }
 
 .table-hover > tbody > tr > td.info:hover,
@@ -4283,7 +4283,7 @@ a.label:hover, a.label:focus {
 }
 
 .label-info {
-  background-color: #009DA7;
+  background-color: #526A84;
 }
 .label-info[href]:hover, .label-info[href]:focus {
   background-color: #006d74;
@@ -4519,8 +4519,8 @@ a.thumbnail.active {
 }
 
 .alert-info {
-  background-color: #009DA7;
-  border-color: #009DA7;
+  background-color: #526A84;
+  border-color: #526A84;
   color: #fff;
 }
 .alert-info hr {
@@ -4655,7 +4655,7 @@ a.thumbnail.active {
 }
 
 .progress-bar-info {
-  background-color: #009DA7;
+  background-color: #526A84;
 }
 .progress-striped .progress-bar-info {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -4843,13 +4843,13 @@ button.list-group-item-success.active:focus {
 }
 
 .list-group-item-info {
-  color: #009DA7;
-  background-color: #009DA7;
+  color: #526A84;
+  background-color: #526A84;
 }
 
 a.list-group-item-info,
 button.list-group-item-info {
-  color: #009DA7;
+  color: #526A84;
 }
 a.list-group-item-info .list-group-item-heading,
 button.list-group-item-info .list-group-item-heading {
@@ -4858,7 +4858,7 @@ button.list-group-item-info .list-group-item-heading {
 a.list-group-item-info:hover, a.list-group-item-info:focus,
 button.list-group-item-info:hover,
 button.list-group-item-info:focus {
-  color: #009DA7;
+  color: #526A84;
   background-color: #00858e;
 }
 a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus,
@@ -4866,8 +4866,8 @@ button.list-group-item-info.active,
 button.list-group-item-info.active:hover,
 button.list-group-item-info.active:focus {
   color: #fff;
-  background-color: #009DA7;
-  border-color: #009DA7;
+  background-color: #526A84;
+  border-color: #526A84;
 }
 
 .list-group-item-warning {
@@ -5246,22 +5246,22 @@ button.list-group-item-danger.active:focus {
 }
 
 .panel-info {
-  border-color: #009DA7;
+  border-color: #526A84;
 }
 .panel-info > .panel-heading {
-  color: #009DA7;
-  background-color: #009DA7;
-  border-color: #009DA7;
+  color: #526A84;
+  background-color: #526A84;
+  border-color: #526A84;
 }
 .panel-info > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #009DA7;
+  border-top-color: #526A84;
 }
 .panel-info > .panel-heading .badge {
-  color: #009DA7;
-  background-color: #009DA7;
+  color: #526A84;
+  background-color: #526A84;
 }
 .panel-info > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #009DA7;
+  border-bottom-color: #526A84;
 }
 
 .panel-warning {
@@ -5416,10 +5416,10 @@ button.close {
   color: #5cb85c;
 }
 .message-info {
-  border-left-color: #009DA7;
+  border-left-color: #526A84;
 }
 .message-info h4 {
-  color: #009DA7;
+  color: #526A84;
 }
 .message-warning {
   border-left-color: #f0ad4e;
@@ -6871,7 +6871,7 @@ button.close {
 }
 
 .icon-info {
-  color: #009DA7;
+  color: #526A84;
 }
 
 .icon-warning {