diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/devices.hbs b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/devices.hbs
index edaeddafe..fa4688cda 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/devices.hbs
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/devices.hbs
@@ -15,6 +15,7 @@
   specific language governing permissions and limitations
   under the License.
 }}
+
 {{unit "cdmf.unit.ui.title" pageTitle="Device Management"}}
 
 {{unit "cdmf.unit.data-tables-extended"}}
@@ -37,33 +38,23 @@
 
 {{#zone "navbarActions"}}
     {{#if permissions.ENROLL_DEVICE}}
-        <li id = "enroll-btn">
+        <li id="enroll-btn" class="hidden">
             <a href="javascript:toggleEnrollment()">
-                                    <span class="fw-stack">
-                                       <i class="fw fw-ring fw-stack-2x"></i>
-                                       <i class="fw fw-mobile fw-stack-1x"></i>
-                                       <span class="fw-stack fw-move-right fw-move-top">
-                                          <i class="fw fw-circle fw-stack-2x fw-stroke fw-inverse"></i>
-                                           <i class="fw fw-circle fw-stack-2x"></i>
-                                          <i class="fw fw-add fw-stack-1x"></i>
-                                       </span>
-                                    </span>
-                &nbsp;&nbsp;Enroll Device
+                <span class="fw-stack">
+                    <i class="fw fw-ring fw-stroke fw-stack-2x"></i>
+                    <i class="fw fw-add fw-stack-1x"></i>
+                </span>
+                &nbsp;&nbsp;Add New Device
             </a>
         </li>
     {{/if}}
     {{#if permissions.ADVANCED_SEARCH}}
-        <li id = "advanced-search-btn">
+        <li id="advanced-search-btn" class="hidden">
             <a href="{{appContext}}devices/search">
-                                    <span class="fw-stack">
-                                       <i class="fw fw-ring fw-stack-2x"></i>
-                                       <i class="fw fw-mobile fw-stack-1x"></i>
-                                       <span class="fw-stack fw-move-right fw-move-top">
-                                          <i class="fw fw-circle fw-stack-2x fw-stroke fw-inverse"></i>
-                                           <i class="fw fw-circle fw-stack-2x"></i>
-                                          <i class="fw fw-search fw-stack-1x"></i>
-                                       </span>
-                                    </span>
+                <span class="fw-stack">
+                    <i class="fw fw-ring fw-stroke fw-stack-2x"></i>
+                    <i class="fw fw-search fw-stack-1x"></i>
+                </span>
                 &nbsp;&nbsp;Advanced Search
             </a>
         </li>
@@ -72,39 +63,56 @@
 
 {{#zone "content"}}
     {{#if permissions.VIEW_DEVICES}}
+        <div id="no-device-view" class="ast-container list-view hidden">
+            <div class="ctrl-info-panel col-centered text-center wr-login">
+                <h3 class="text-muted">
+                    <i class="fw fw-mobile fw-3x"></i>
+                </h3>
+                <h3 class="text-muted">You do not have any enrolled device at the moment</h3>
+                <h3>
+                    <a href="javascript:toggleEnrollment()" class="btn-operations btn-default">
+                        <span class="fw-stack">
+                            <i class="fw fw-ring fw-stack-2x"></i>
+                            <i class="fw fw-add fw-stack-1x"></i>
+                        </span>
+                        &nbsp;&nbsp;Add New Device
+                    </a>
+                </h3>
+            </div>
+        </div>
         <div id="device-table" class="hidden">
-            <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view"
-                   id="device-grid">
+            <table id="device-grid"
+                class="table table-striped table-hover list-table display responsive nowrap data-table grid-view">
                 <thead>
-                <tr class="sort-row">
-                    <th class="no-sort"></th>
-                    <th>By Device Name</th>
-                    <th>By Owner</th>
-                    <th>By Status</th>
-                    <th>By Platform</th>
-                    <th>By Ownership</th>
-                    <th class="no-sort"></th>
-                </tr>
-                <tr class="filter-row filter-box">
-                    <th class="no-sort"></th>
-                    <th data-for="By Device Name"></th>
-                    <th data-for="By Owner" class="text-filter"></th>
-                    <th data-for="By Status" class="select-filter"></th>
-                    <th data-for="By Platform" class="select-filter data-platform"></th>
-                    <th data-for="By Ownership" class="select-filter"></th>
-                    <th class="no-sort"></th>
-                </tr>
-                <tr class="bulk-action-row hidden">
-                    <th colspan="7">
-                        <div id="operation-bar">
-                            {{unit "mdm.unit.device.operation-bar"}}
-                        </div>
-                        <div id="operation-guide" class="bs-callout bs-callout-info">
-                            <h4>Enabling Device Operations</h4>
-                            <p>To enable device operations, select the desired platform from above filter.</p>
-                        </div>
-                    </th>
-                </tr>
+                    <tr class="sort-row">
+                        <th class="no-sort"></th>
+                        <th>By Device Name</th>
+                        <th>By Owner</th>
+                        <th>By Status</th>
+                        <th>By Platform</th>
+                        <th>By Ownership</th>
+                        <th class="no-sort"></th>
+                    </tr>
+                    <tr class="filter-row filter-box">
+                        <th class="no-sort"></th>
+                        <th data-for="By Device Name"></th>
+                        <th data-for="By Owner" class="text-filter"></th>
+                        <th data-for="By Status" class="select-filter"></th>
+                        <th data-for="By Platform" class="select-filter data-platform"></th>
+                        <th data-for="By Ownership" class="select-filter"></th>
+                        <th class="no-sort"></th>
+                    </tr>
+                    <tr class="bulk-action-row hidden">
+                        <th colspan="7">
+                            <div id="operation-bar">
+                                {{unit "mdm.unit.device.operation-bar"}}
+                            </div>
+                            <div id="operation-guide" class="bs-callout bs-callout-info">
+                                <h4>Enabling Device Operations</h4>
+                                <p>To enable device operations, select the desired platform from above filter.</p>
+                            </div>
+                        </th>
+                    </tr>
                 </thead>
                 <tbody id="ast-container"></tbody>
             </table>
@@ -120,16 +128,6 @@
                 <a href="#">By Ownership</a>
             </div>
         </div>
-        <div id="no-device-view" class="ast-container list-view hidden">
-            <div class="ctrl-info-panel col-centered text-center wr-login">
-                <h3 class="text-muted">You do not have any enrolled device at the moment</h3>
-                <h3 class="text-center">
-                    <a href="javascript:toggleEnrollment()" class="btn btn-primary">
-                        Add New Device
-                    </a>
-                </h3>
-            </div>
-        </div>
     {{else}}
         <h1 class="page-sub-title">
             Permission Denied
diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/public/js/device-listing.js b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/public/js/device-listing.js
index 67c345e7f..f48713e26 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/public/js/device-listing.js
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.devices/public/js/device-listing.js
@@ -76,17 +76,72 @@ function loadDevices() {
         return {};
     }
 
-    var fnCreatedRow = function (nRow, aData, dataIndex) {
-        $(nRow).attr('data-type', 'selectable');
-        $(nRow).attr('data-deviceid', aData.deviceIdentifier);
-        $(nRow).attr('data-devicetype', aData.deviceType);
+    var dataFilter = function (data) {
+        var noDeviceView = "#no-device-view";
+
+        data = JSON.parse(data);
+        var json;
+
+        if (data["count"] == 0) {
+            if ($(noDeviceView).length) {
+                $(noDeviceView).removeClass('hidden');
+            }
+
+            $(".bulk-action-row").addClass('hidden');
+
+            json = {
+                "recordsTotal": 0,
+                "recordsFiltered": 0,
+                "data": []
+            };
+
+            return JSON.stringify(json);
+
+        } else if (data["count"] > 0) {
+            $(noDeviceView).remove();
+            $("#enroll-btn").removeClass('hidden');
+            $("#advanced-search-btn").removeClass('hidden');
+            $(".bulk-action-row").removeClass('hidden');
+            $("#device-table").removeClass('hidden');
+
+            var objects = [];
+
+            $(data.devices).each(function (index) {
+                objects.push(
+                    {
+                        model: getPropertyValue(data.devices[index].properties, "DEVICE_MODEL"),
+                        vendor: getPropertyValue(data.devices[index].properties, "VENDOR"),
+                        user: data.devices[index].enrolmentInfo.owner,
+                        status: data.devices[index].enrolmentInfo.status,
+                        ownership: data.devices[index].enrolmentInfo.ownership,
+                        deviceType: data.devices[index].type,
+                        deviceIdentifier: data.devices[index].deviceIdentifier,
+                        name : data.devices[index].name
+                    }
+                );
+            });
+
+            json = {
+                "recordsTotal": data["count"],
+                "recordsFiltered": data["count"],
+                "data": objects
+            };
+
+            return JSON.stringify(json);
+        }
     };
 
+    // possible params - nRow, aData, dataIndex
+    var fnCreatedRow = function (nRow, aData) {
+        $(nRow).attr('data-type', 'selectable');
+        $(nRow).attr('data-devicetype', aData["deviceType"]);
+        $(nRow).attr('data-deviceid', aData["deviceIdentifier"]);
+    };
 
     var columns = [
         {
             class : 'remove-padding icon-only content-fill viewEnabledIcon',
-            data : 'icon',
+            data : null,
             render: function (data, type, row) {
                 var deviceType = row.deviceType;
                 var deviceIdentifier = row.deviceIdentifier;
@@ -156,35 +211,6 @@ function loadDevices() {
         }
     ];
 
-
-    var dataFilter = function (data) {
-        data = JSON.parse(data);
-
-        var objects = [];
-
-        $(data.devices).each(function (index) {
-            objects.push(
-                {
-                    model: getPropertyValue(data.devices[index].properties, "DEVICE_MODEL"),
-                    vendor: getPropertyValue(data.devices[index].properties, "VENDOR"),
-                    user: data.devices[index].enrolmentInfo.owner,
-                    status: data.devices[index].enrolmentInfo.status,
-                    ownership: data.devices[index].enrolmentInfo.ownership,
-                    deviceType: data.devices[index].type,
-                    deviceIdentifier: data.devices[index].deviceIdentifier,
-                    name : data.devices[index].name
-                }
-            );
-        });
-
-        var json = {
-            "recordsTotal": data.count,
-            "recordsFiltered": data.count,
-            "data": objects
-        };
-        return JSON.stringify(json);
-    };
-
     $('#device-grid').datatables_extended_serverside_paging(
         null,
         "/api/device-mgt/v1.0/devices",
@@ -220,29 +246,30 @@ function loadDevices() {
 //}
 
 function initPage() {
-    var currentUser = $("#device-listing").data("currentUser");
-    var serviceURL = "/api/device-mgt/v1.0/devices";
-
-    invokerUtil.get(
-        serviceURL,
-        function (data) {
-            if (data) {
-                data = JSON.parse(data);
-                if (data["count"] > 0) {
-                    $(".bulk-action-row").removeClass('hidden');
-                    $("#device-table").removeClass('hidden');
-                    loadDevices();
-                } else {
-                    $("#enroll-btn").addClass('hidden');
-                    $("#advanced-search-btn").addClass('hidden');
-                    $("#device-table").addClass('hidden');
-                    $("#no-device-view").removeClass('hidden');
-                }
-            }
-        }, function () {
-            initPage();
-        }
-    );
+//    var currentUser = $("#device-listing").data("currentUser");
+//    var serviceURL = "/api/device-mgt/v1.0/devices";
+//
+//    invokerUtil.get(
+//        serviceURL,
+//        function (data) {
+//            if (data) {
+//                data = JSON.parse(data);
+//                if (data["count"] > 0) {
+//                    $(".bulk-action-row").removeClass('hidden');
+//                    $("#device-table").removeClass('hidden');
+//                    loadDevices();
+//                } else {
+//                    $("#enroll-btn").addClass('hidden');
+//                    $("#advanced-search-btn").addClass('hidden');
+//                    $("#device-table").addClass('hidden');
+//                    $("#no-device-view").removeClass('hidden');
+//                }
+//            }
+//        }, function () {
+//            initPage();
+//        }
+//    );
+    loadDevices();
 }
 
 /*