diff --git a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/public/css/styles.css b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/public/css/styles.css
index 0c138185a..cdd2ea415 100644
--- a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/public/css/styles.css
+++ b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/public/css/styles.css
@@ -56,13 +56,11 @@ hr {
     background-color: #f6f4f4;
 }
 
-.doc-link {
-    background: #11375B;
-    padding: 20px;
-    color: white;
-    margin-top: 0;
+.doc-link{
+    background: none;
+    color: #000;
+    padding: 10px 0px;
 }
-
 .doc-link a {
-    color: white;
+    color: #006eff;
 }
\ No newline at end of file
diff --git a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs
index 64d528722..955e07b54 100644
--- a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs
+++ b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs
@@ -20,17 +20,15 @@
     <hr>
 </div>
 
-<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
+<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 padding-top">
     <img src="{{@unit.publicUri}}/images/android-sense-icon.png" class="img-responsive">
 </div>
 
 <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
-    <h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Android+Sense"
-                                  target="_blank">[ here ]</a> for latest instructions and
-                         troubleshooting.</h4>
+
 </div>
 
-<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
+<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
     <h3 class="uppercase">What it Does</h3>
     <hr>
     <p class="grey margin-top">Connect an Android device to WSO2 IoT Server and visualize sensor
@@ -41,24 +39,27 @@
     <p class="grey margin-top">You should have an Android Device to get started.</p>
     <ul class="list-unstyled">
         <li class="padding-top-double">
-            <span class="circle">STEP 01</span>
+            <span class="badge">STEP 01</span>
                Go ahead and click [Enroll Device].
         </li>
-        <li class="padding-top-double">
-            <span class="circle">STEP 02</span>
+        <li>
+            <span class="badge">STEP 02</span>
                You can either scan the QR code or directly download Android agent.
         </li>
-        <li class="padding-top-double">
-            <span class="circle">STEP 03</span>
+        <li>
+            <span class="badge">STEP 03</span>
                Install Android agent into your Android Device.
         </li>
-        <li class="padding-top-double"><span class="circle">STEP 04</span>
+        <li><span class="badge">STEP 04</span>
                Proceed to [Prepare] section.
     </ul>
     <br>
     <a href="#" class="download-link btn-operations">
         <i class="fw fw-mobile fw-inverse fw-lg"></i> Enroll Device</a>
     <br/><br/>
+    <p class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Android+Sense"
+                                  target="_blank">[ here ]</a> for latest instructions and
+        troubleshooting.</p>
 
     <div id="device-400-content" class="hide">
         <div class="modal-content">
diff --git a/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs b/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
index b0b790ae7..54c12b154 100644
--- a/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
+++ b/components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
@@ -20,7 +20,7 @@
     <hr>
 </div>
 
-<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
+<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 padding-top">
     <img src="{{@unit.publicUri}}/images/ardunio-icon.png" class="img-responsive">
 </div>
 
@@ -28,7 +28,7 @@
 
 </div>
 
-<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
+<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
     <h3 class="uppercase">What it Does</h3>
     <hr>
     <p class="grey margin-top">Connect Arduino UNO board to WSO2 IoT Server and visualize sensor
diff --git a/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs b/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs
index 4c9f69088..e900fbd1a 100644
--- a/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs
+++ b/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs
@@ -20,12 +20,12 @@
     <hr>
 </div>
 
-<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
+<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 padding-top">
     <img src="{{@unit.publicUri}}/images/respberry-icon.png" class="img-responsive">
 </div>
 
 
-<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
+<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
     <h3 class="uppercase">What it Does</h3>
     <hr>
     <p class="grey margin-top">Connect a RaspberryPi to WSO2 IoT Server and manage it.</p>
diff --git a/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/public/css/styles.css b/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/public/css/styles.css
index 47250fc86..84a4894b7 100644
--- a/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/public/css/styles.css
+++ b/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/public/css/styles.css
@@ -56,13 +56,11 @@ hr {
     background-color: #f6f4f4;
 }
 
-.doc-link {
-    background: #11375B;
-    padding: 20px;
-    color: white;
-    margin-top: 0;
+.doc-link{
+    background: none;
+    color: #000;
+    padding: 10px 0px;
 }
-
 .doc-link a {
-    color: white;
+    color: #006eff;
 }
diff --git a/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs b/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs
index 1b026619e..c2ad5fe22 100644
--- a/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs
+++ b/components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs
@@ -19,15 +19,10 @@
     <h1 class="grey ">Virtual Firealarm</h1>
     <hr>
 </div>
-<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
+<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 padding-top">
     <img src="{{@unit.publicUri}}/images/firealarm-icon.png" class="img-responsive">
 </div>
-<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
-    <h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Virtual+Firealarm"
-                                  target="_blank">[ here ]</a> for latest instructions and
-                         troubleshooting.</h4>
-</div>
-<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
+<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
     <h3 class="uppercase">What it Does</h3>
     <hr>
     <p class="grey margin-top">A Virtual Device that mimics the functionality of a real Firealarm.
@@ -40,15 +35,15 @@
     <hr>
     <ul class="list-unstyled">
         <li class="padding-top-double">
-            <span class="circle">STEP 01</span>
+            <span class="badge">STEP 01</span>
                Go ahead and [Download] the Device.
         </li>
-        <li class="padding-top-double">
-            <span class="circle">STEP 02</span>
+        <li>
+            <span class="badge">STEP 02</span>
                Proceed to [Prepare] section.
         </li>
-        <li class="padding-top-double">
-            <span class="circle">STEP 03</span>
+        <li>
+            <span class="badge">STEP 03</span>
                Read [Try Out] section to further experiment with the device.
         </li>
     </ul>
@@ -59,7 +54,9 @@
     </a>
     <a href="#" class="download-link btn-operations">
         <i class="fw fw-download"></i>Download Agent</a>
-
+    <p class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Virtual+Firealarm"
+                                  target="_blank">[ here ]</a> for latest instructions and
+        troubleshooting.</p>
     <div id="download-device-modal-content" class="hide">
         <div class="modal-header">
             <h4 class="pull-left modal-title">
diff --git a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
index 3b1496c73..fa6eaefca 100644
--- a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
+++ b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
@@ -5,12 +5,12 @@
     <h1 class="grey ">Android Mobile</h1>
     <hr>
 </div>
-<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
+<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 padding-top">
     <img src="{{@unit.publicUri}}/images/android-icon.png" class="img-responsive">
 </div>
 
 
-<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
+<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
 
     <h3 class="uppercase">What it Does</h3>
     <hr>