diff --git a/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.device-view/device-view.hbs b/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.device-view/device-view.hbs
index 02f1f018d1..48f2bc2d9b 100644
--- a/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.device-view/device-view.hbs
+++ b/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.device-view/device-view.hbs
@@ -7,7 +7,7 @@
 {{/zone}}
 
 {{#zone "device-thumbnail"}}
-    <img src="{{@unit.publicUri}}/images/ardunio-icon.png"/>
+    <img src="{{@unit.publicUri}}/images/ardunio-icon.png" class="img-responsive">
 {{/zone}}
 
 {{#zone "device-opetations"}}
@@ -20,51 +20,73 @@
 {{/zone}}
 
 {{#zone "device-detail-properties"}}
-    <div class="media-body add-padding-left-5x remove-padding-xs tab-content">
-        <div class="panel-group tab-content">
+    <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">
+                <li class="active"><a class="list-group-item" href="#device_statistics" role="tab"
+                                      data-toggle="tab" aria-controls="device_statistics">Device
+                                                                                          Statistics</a>
+                </li>
+                <li><a class="list-group-item" href="#policy_compliance" role="tab"
+                       data-toggle="tab" aria-controls="policy_compliance">Policy Compliance</a>
+                </li>
+                <li><a class="list-group-item" href="#event_log" role="tab" data-toggle="tab"
+                       aria-controls="event_log">Operations Log</a></li>
+            </ul>
+        </div>
+        <div class="media-body add-padding-left-5x remove-padding-xs tab-content">
+            <div class="panel-group tab-content">
 
-            <div id="deviceDetails" class="panel panel-default tab-pane active" id="device_details" role="tabpanel" aria-labelledby="device_details">
-                <div class="panel-heading">Device Details</div>
-                {{unit "iot.unit.device.stats" device=device}}
-            </div>
+                <div class="panel panel-default tab-pane active"
+                     id="device_statistics" role="tabpanel" aria-labelledby="device_statistics">
+                    <div class="panel-heading">Device Statistics</div>
+                    {{unit "iot.unit.device.stats" device=device}}
+                </div>
 
-            <div class="panel panel-default tab-pane" id="policy_compliance" role="tabpanel" aria-labelledby="policy_compliance">
-                <div class="panel-heading">Policy Compliance <span><a href="#" id="refresh-policy"><i class="fw fw-refresh"></i></a></span></div>
-                <div class="panel-body">
-                    <div id="policy-spinner" class="wr-advance-operations-init hidden">
-                        <br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        <i class="fw fw-settings fw-spin fw-2x"></i>
-                        &nbsp;&nbsp;&nbsp;
-                        Loading Policy Compliance . . .
-                        <br>
-                        <br>
-                    </div>
-                    <div id="policy-list-container">
-                        <div class="panel-body">
-                            Not available yet
+                <div class="panel panel-default tab-pane" id="policy_compliance" role="tabpanel"
+                     aria-labelledby="policy_compliance">
+                    <div class="panel-heading">Policy Compliance <span><a href="#"
+                                                                          id="refresh-policy"><i
+                            class="fw fw-refresh"></i></a></span></div>
+                    <div class="panel-body">
+                        <div id="policy-spinner" class="wr-advance-operations-init hidden">
+                            <br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                            <i class="fw fw-settings fw-spin fw-2x"></i>
+                            &nbsp;&nbsp;&nbsp;
+                            Loading Policy Compliance . . .
+                            <br>
+                            <br>
+                        </div>
+                        <div id="policy-list-container">
+                            <div class="panel-body">
+                                Not available yet
+                            </div>
+                            <br class="c-both"/>
                         </div>
-                        <br class="c-both" />
                     </div>
                 </div>
-            </div>
-            <div class="panel panel-default tab-pane" id="event_log" role="tabpanel" aria-labelledby="event_log">
-                <div class="panel-heading">Operations Log <span><a href="#" id="refresh-operations"><i class="fw fw-refresh"></i></a></span></div>
-                <div class="panel-body">
-                    <div id="operations-spinner" class="wr-advance-operations-init hidden">
-                        <br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        <i class="fw fw-settings fw-spin fw-2x"></i>
-                        &nbsp;&nbsp;&nbsp;
-                        Loading Operations Log . . .
-                        <br>
-                        <br>
-                    </div>
-                    <div id="operations-log-container">
-                        <div class="panel-body">
-                            Not available yet
+                <div class="panel panel-default tab-pane" id="event_log" role="tabpanel"
+                     aria-labelledby="event_log">
+                    <div class="panel-heading">Operations Log <span><a href="#"
+                                                                       id="refresh-operations"><i
+                            class="fw fw-refresh"></i></a></span></div>
+                    <div class="panel-body">
+                        <div id="operations-spinner" class="wr-advance-operations-init hidden">
+                            <br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                            <i class="fw fw-settings fw-spin fw-2x"></i>
+                            &nbsp;&nbsp;&nbsp;
+                            Loading Operations Log . . .
+                            <br>
+                            <br>
+                        </div>
+                        <div id="operations-log-container">
+                            <div class="panel-body">
+                                Not available yet
+                            </div>
+                            <br class="c-both"/>
                         </div>
-                        <br class="c-both" />
                     </div>
                 </div>
             </div>
diff --git a/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs b/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
index 9d5f8ef557..0c04c1ed23 100644
--- a/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
+++ b/features/device-mgt-iot-arduino-feature/org.wso2.carbon.device.mgt.iot.arduino.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
@@ -1,95 +1,279 @@
-{{#zone "topCss"}}
-    <style>
-        .thumbnail.icon:before {
-        padding-top: 0;
-        }
-    </style>
-{{/zone}}
+<div class="col-lg-12  margin-top-double">
+    <h1 class="grey ">Arduino</h1>
+    <hr>
+    <p class="margin-bottom-double light-grey ">Connect your Arduino device to the WSO2 IoT Server.</p>
+</div>
 
-{{#zone "device-thumbnail"}}
+<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
     <img src="{{@unit.publicUri}}/images/ardunio-icon.png" class="img-responsive">
-{{/zone}}
+</div>
 
-{{#zone "device-opetations"}}
-    <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
-        Operations
+<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
+
+    <h3 class="uppercase">What You Need</h3>
+    <hr>
+    <p class="grey margin-top">You'll need the following "Hardware":</p>
+    <ul class="list-unstyled">
+        <li class="padding-top-double"><span class="circle">ITEM 01</span>&nbsp;&nbsp;&nbsp;Arduino UNO Board.
+        </li>
+        <li class="padding-top-double"><span class="circle">ITEM 02</span>&nbsp;&nbsp;&nbsp;Adafruit Wifi-Sheild for
+                                                                          Arduino.
+        </li>
+        <li class="padding-top-double"><span class="circle">ITEM 03</span>&nbsp;&nbsp;&nbsp;An LED Bulb connected to Pin
+                                                                          13. <i>(If not available, will use the one on
+                                                                                 the board.)</i>
+        </li>
+        <li class="padding-top-double"><span class="circle">GO-TO PREPARE</span></li>
+    </ul>
+    <br>
+
+    <a href="/api-store/apis/info?name={{@uriParams.deviceType}}&version=1.0.0&provider=admin"
+       class="btn-operations" target="_blank"><i class="fw fw-api"></i> View API</a>
+    <a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Download Sketch</a>
+
+    <div id="download-device-modal-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7  center-container">
+                    <h3>Name your device and download the agent from following link.</h3>
+                    <br/>
+
+                    <form id="downloadForm" method="GET" action="{{@app.context}}/api/devices/sketch/download">
+                        <div class="control-group">
+                            <div class="controls">
+                                <input class="new-device-name" style="color:#3f3f3f;padding:5px"
+                                       type="text"
+                                       placeholder="Ex. Home_Arduino"
+                                       name="deviceName" size="60" required>
+                                <br/><br/>
+                                <input type="hidden" class="deviceType" name="deviceType"
+                                       value="{{@uriParams.deviceType}}"/>
+                                <input type="hidden" class="sketchType" name="sketchType"
+                                       value="{{@uriParams.deviceType}}"/> &nbsp;&nbsp;
+                            </div>
+                        </div>
+                        <div class="buttons" style="padding-bottom: 0px">
+                            <a class="btn btn-operations" onclick="downloadAgent()">
+                                Download Now
+                            </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
     </div>
-    <div class="add-margin-top-4x">
-        {{unit "iot.unit.device.operation-bar" device=device}}
+
+    <div id="device-400-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h3>Exception at backend. Try Later.</h3>
+
+                    <div class="buttons">
+                        <a href="#" id="device-400-link" class="btn-operations">
+                            OK
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-{{/zone}}
 
-{{#zone "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">
-                <li class="active"><a class="list-group-item" href="#device_statistics" role="tab"
-                                      data-toggle="tab" aria-controls="device_statistics">Device
-                    Statistics</a>
-                </li>
-                <li><a class="list-group-item" href="#policy_compliance" role="tab"
-                       data-toggle="tab" aria-controls="policy_compliance">Policy Compliance</a>
-                </li>
-                <li><a class="list-group-item" href="#event_log" role="tab" data-toggle="tab"
-                       aria-controls="event_log">Operations Log</a></li>
-            </ul>
+    <div id="device-401-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h3>You have to log in first.</h3><br/>
+
+                    <div class="buttons">
+                        <a href="#" id="device-401-link" class="blue-button">
+                            Goto Login Page
+                        </a>&nbsp;&nbsp;
+                        <a href="#" onclick="hidePopup();" class="btn-operations">
+                            Cancel
+                        </a>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="media-body add-padding-left-5x remove-padding-xs tab-content">
-            <div class="panel-group tab-content">
+    </div>
 
-                <div class="panel panel-default tab-pane active"
-                     id="device_statistics" role="tabpanel" aria-labelledby="device_statistics">
-                    <div class="panel-heading">Device Statistics</div>
-                    {{unit "iot.unit.device.stats" device=device}}
+    <div id="device-403-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h3>Action not permitted.</h3><br/>
+
+                    <div class="buttons">
+                        <a href="#" id="device-403-link" class="btn-operations">
+                            OK
+                        </a>
+                    </div>
                 </div>
+            </div>
+        </div>
+    </div>
 
-                <div class="panel panel-default tab-pane" id="policy_compliance" role="tabpanel"
-                     aria-labelledby="policy_compliance">
-                    <div class="panel-heading">Policy Compliance <span><a href="#"
-                                                                          id="refresh-policy"><i
-                            class="fw fw-refresh"></i></a></span></div>
-                    <div class="panel-body">
-                        <div id="policy-spinner" class="wr-advance-operations-init hidden">
-                            <br>
-                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                            <i class="fw fw-settings fw-spin fw-2x"></i>
-                            &nbsp;&nbsp;&nbsp;
-                            Loading Policy Compliance . . .
-                            <br>
-                            <br>
-                        </div>
-                        <div id="policy-list-container">
-                            <div class="panel-body">
-                                Not available yet
-                            </div>
-                            <br class="c-both"/>
-                        </div>
+    <div id="device-409-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h3>Device Sketch does not exist.</h3><br/>
+
+                    <div class="buttons">
+                        <a href="#" id="device-409-link" class="btn-operations">
+                            OK
+                        </a>
                     </div>
                 </div>
-                <div class="panel panel-default tab-pane" id="event_log" role="tabpanel"
-                     aria-labelledby="event_log">
-                    <div class="panel-heading">Operations Log <span><a href="#"
-                                                                       id="refresh-operations"><i
-                            class="fw fw-refresh"></i></a></span></div>
-                    <div class="panel-body">
-                        <div id="operations-spinner" class="wr-advance-operations-init hidden">
-                            <br>
-                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                            <i class="fw fw-settings fw-spin fw-2x"></i>
-                            &nbsp;&nbsp;&nbsp;
-                            Loading Operations Log . . .
-                            <br>
-                            <br>
-                        </div>
-                        <div id="operations-log-container">
-                            <div class="panel-body">
-                                Not available yet
-                            </div>
-                            <br class="c-both"/>
-                        </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="device-unexpected-error-content" class="hide">
+        <div class="modal-content">
+            <div class="row">
+                <div class="col-md-7 col-centered center-container">
+                    <h3>Unexpected error.</h3><br/>
+
+                    <div class="buttons">
+                        <a href="#" id="device-unexpected-error-link" class="btn-operations">
+                            OK
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+
+    <br/><br/>
+</div>
+
+<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double grey-bg">
+    <h3 class="uppercase">Prepare</h3>
+    <hr>
+    <p class="grey margin-top">Get the Wifi-Sheild mounted onto the Arduino-UNO board and follow the steps: </p>
+    <ul class="list-unstyled">
+        <li class="padding-top-double"><span class="circle">01</span>&nbsp;&nbsp;&nbsp;Download the Arduino-Sketch from
+                                                                     the [Download] link above.
+        </li>
+        <li class="padding-top-double"><span class="circle">02</span>&nbsp;&nbsp;&nbsp;Unzip the downloaded
+                                                                     Arduino-Sketch and open the <i>"ArduinoBoardSketch.h"</i>
+                                                                     file.
+        </li>
+        <li class="padding-top-double"><span class="circle">03</span>&nbsp;&nbsp;&nbsp;Provide appropriate values for
+            <i>[WLAN_SSID]</i> and <i>[WLAN_PASS]</i> variables according to your network.
+        </li>
+        <li class="padding-top-double"><span class="circle">04</span>&nbsp;&nbsp;&nbsp;Burn the sketch onto your Arduino
+                                                                     board and let the program run.
+        </li>
+
+        <li class="padding-top-double">
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <span class="fw-stack fw-lg margin-right">
+                <i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-right-arrow fw-stack-1x"></i>
+            </span>
+            &nbsp;&nbsp;&nbsp;The Arduino will publish its internal temperature to the WSO2-IoT-Server and its LED on
+            <i>PIN 13</i> can be controlled from our Device Management page.
+        </li>
+    </ul>
+    <br>
+</div>
+
+<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
+    <h3 class="uppercase">Try Out</h3>
+    <hr>
+    <p class="grey margin-top">WSO2-IoT Server provides Analytics and Real-Time Statistics of your device</p>
+    <ul class="list-unstyled">
+        <li class="padding-top-double"><span class="circle">01</span>&nbsp;&nbsp;&nbsp;You can view all your created
+                                                                     devices at our <a href="{{@app.context}}/devices">[Device
+                                                                                                                       Management]</a>
+                                                                     page.
+        </li>
+        <li class="padding-top-double"><span class="circle">02</span>&nbsp;&nbsp;&nbsp;You can select any of your
+                                                                     created devices here and check for available
+                                                                     operations and monitor Real-Time data.
+        </li>
+        <li class="padding-top-double"><span class="circle">03</span>&nbsp;&nbsp;&nbsp;You can also view "Analytics" of
+                                                                     the data published to the IoT-Server by navigating
+                                                                     to the [Device-Analytics Page] from here.
+        </li>
+    </ul>
+    <br/>
+
+    <p class="grey margin-top">Click on the image to zoom</p>
+    <center>
+        <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
+            <img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive">
+        </a>
+    </center>
+
+</div>
+
+
+{{#zone "topCss"}}
+    <style type="text/css">
+        .circle {
+            background: none repeat scroll 0 0 #191919;
+            border-radius: 50px;
+            height: 50px;
+            padding: 10px;
+            width: 50px;
+            color: #fff;
+        }
+
+        .padding-top-double {
+            padding-top: 20px;
+        }
+
+        .padding-double {
+            padding: 20px;
+        }
+
+        .grey {
+            color: #333;
+        }
+
+        hr {
+            display: block;
+            height: 1px;
+            border: 0;
+            border-top: 1px solid #7f7f7f;
+            margin: 1em 0;
+            padding: 0;
+            opacity: 0.2;
+        }
+
+        .light-grey {
+            color: #7c7c7c;
+        }
+
+        .uppercase {
+            text-transform: uppercase;
+        }
+
+        .grey-bg {
+            background-color: #f6f4f4;
+        }
+    </style>
+{{/zone}}
+
+{{#zone "bottomJs"}}
+    {{js "/js/download.js"}}
+    {{js "/js/jquery.validate.js"}}
+    <script type="text/javascript">
+
+        $(document).ready(function () {
+            toggleEnrollment();
+        });
+
+
+        function toggleEnrollment() {
+            $(".modalpopup-content").html($("#qr-code-modal").html());
+            //generateQRCode(".modalpopup-content .qr-code");
+            //showPopup();
+        }
+
+    </script>
 {{/zone}}
\ No newline at end of file