diff --git a/components/iot-plugins/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/iot-plugins/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 6a254dd5b..dc3b01e3d 100644
--- a/components/iot-plugins/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/iot-plugins/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
@@ -59,42 +59,60 @@
     </a>
     <a href="#" class="download-link btn-operations">
         <i class="fw fw-download"></i>Download Agent</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 id="invalid-username-error-msg" class="alert alert-danger hidden"
-                             role="alert">
-                            <i class="icon fw fw-error"></i><span></span>
-                        </div>
-                        <div class="control-group">
-                            <div class="controls">
-                                <input class="new-device-name" style="color:#3f3f3f;padding:5px"
-                                       type="text"
-                                       placeholder="Ex. Lobby_Firealarm"
-                                       name="deviceName" size="60" required>
-                                <br/><br/>
-                                <input type="hidden" class="deviceType" name="deviceType"
-                                       value="{{@uriParams.deviceType}}"/>
-                                <input type="radio" name="sketchType" value="virtual_firealarm"
-                                       id="virtual_firealarm"
-                                       checked>
-                                <label for="simple_agent">Simple Agent</label> &nbsp;&nbsp;
-                                <input type="radio" name="sketchType"
-                                       value="virtual_firealarm_advanced"
-                                       id="virtual_firealarm_advanced">
-                                <label for="advanced_agent">Advanced Agent</label>
-                            </div>
-                        </div>
-                        <div class="buttons" style="padding-bottom: 0px">
-                            <a class="btn btn-operations" onclick="downloadAgent()">Download Now</a>
+        <div class="modal-header">
+            <h4 class="pull-left modal-title">
+                <span class="fw-stack">
+                    <i class="fw fw-raspberry fw-stack-2x"></i>
+                    <span class="fw-stack fw-move-right fw-move-bottom">
+                      <i class="fw fw-ring fw-stack-2x"></i>
+                      <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>
+                      <i class="fw fw-add fw-stack-1x fw-inverse"></i>
+                   </span>
+                </span>
+                &nbsp;&nbsp;Add your new firealarm device to {{@app.conf.appName}}
+            </h4>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
+            </button>
+        </div>
+        <hr>
+        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+            <div class="panel-body col-centered text-center">
+                <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 id="invalid-username-error-msg" class="alert alert-danger hidden"
+                         role="alert">
+                        <i class="icon fw fw-error"></i><span></span>
+                    </div>
+                    <div class="control-group">
+                        <div class="controls">
+                            <input class="new-device-name" style="color:#3f3f3f;padding:5px"
+                                   type="text"
+                                   placeholder="Ex. Lobby_Firealarm"
+                                   name="deviceName" size="60" required>
+                            <br /><br />
+                            <input type="hidden" class="deviceType" name="deviceType"
+                                   value="{{@uriParams.deviceType}}" />
+                            <input type="radio" name="sketchType" value="virtual_firealarm"
+                                   id="virtual_firealarm"
+                                   checked>
+                            <label for="simple_agent">Simple Agent</label> &nbsp;&nbsp;
+                            <input type="radio" name="sketchType"
+                                   value="virtual_firealarm_advanced"
+                                   id="virtual_firealarm_advanced">
+                            <label for="advanced_agent">Advanced Agent</label>
                         </div>
-                    </form>
-                </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons" style="padding-bottom: 0px">
+                <a class="btn btn-operations" onclick="downloadAgent()">Download Now</a>
+                <a href="javascript:hidePopup()" class="btn-operations btn-default">Cancel</a>
             </div>
         </div>
     </div>
@@ -125,7 +143,7 @@
         <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/>
+                    <h3>You have to log in first.</h3><br />
 
                     <div class="buttons">
                         <a href="#" id="device-401-link" class="blue-button">
@@ -143,7 +161,7 @@
         <div class="modal-content">
             <div class="row">
                 <div class="col-md-7 col-centered center-container">
-                    <h3>Action not permitted.</h3><br/>
+                    <h3>Action not permitted.</h3><br />
                     <div class="buttons">
                         <a href="#" id="device-403-link" class="btn-operations">
                             OK
@@ -157,7 +175,7 @@
         <div class="modal-content">
             <div class="row">
                 <div class="col-md-7 col-centered center-container">
-                    <h3>Device Sketch does not exist.</h3><br/>
+                    <h3>Device Sketch does not exist.</h3><br />
 
                     <div class="buttons">
                         <a href="#" id="device-409-link" class="btn-operations">
@@ -172,7 +190,7 @@
         <div class="modal-content">
             <div class="row">
                 <div class="col-md-7 col-centered center-container">
-                    <h3>Unexpected error.</h3><br/>
+                    <h3>Unexpected error.</h3><br />
 
                     <div class="buttons">
                         <a href="#" id="device-unexpected-error-link" class="btn-operations">
@@ -183,7 +201,7 @@
             </div>
         </div>
     </div>
-    <br/><br/>
+    <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>
@@ -218,7 +236,7 @@
             <img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive">
         </a>
     </center>
-    <br/>
+    <br />
 </div>
 <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
     <h3 class="uppercase">Try Out</h3>
@@ -240,7 +258,7 @@
             navigating to Device Analytics page.
         </li>
     </ul>
-    <br/>
+    <br />
     <p class="grey margin-top">Click on the image to zoom</p>
     <center>
         <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">