diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.hbs
index acf56f7963..a368502c91 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.hbs
@@ -15,6 +15,7 @@
   specific language governing permissions and limitations
   under the License.
 }}
+
 <div id="loading-content" class="col-centered">
     {{#if removePermitted}}
         <input type="hidden" id="can-remove" value="true" />
@@ -27,36 +28,20 @@
     <br>
 </div>
 
-<div id="role-listing-status" class="raw">
-    <ul style="list-style-type: none;">
-        <li class="message message-info">
-            <h4>
-                <i class="icon fw fw-info"></i>
-                <a id="role-listing-status-msg"></a>
-            </h4>
-        </li>
-    </ul>
-</div>
-
 <div id="role-table" data-role={{adminRole}}>
-    <table class="table table-striped table-hover list-table display responsive nowrap data-table row-view"
-           id="role-grid">
+    <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view" id="role-grid">
         <thead>
         <tr class="sort-row">
-            <th class="no-sort"></th>
             <th>By Role Name</th>
-            <th class="no-sort"></th>
         </tr>
         <tr class="bulk-action-row">
             <th colspan="3"></th>
         </tr>
         </thead>
-        <tbody id="ast-container" data-app-context="{{appContext}}">
-        <br class="c-both" />
-        </tbody>
+        <tbody id="ast-container"></tbody>
     </table>
 </div>
-<br class="c-both" />
+
 <div id="content-filter-types" style="display: none">
     <div class="sort-title">Sort By</div>
     <div class="sort-options">
@@ -120,6 +105,7 @@
 {{/zone}}
 
 {{#zone "bottomJs"}}
+    <!--suppress HtmlUnknownTarget -->
     <script id="role-listing" data-current-user="{{currentUser.username}}"
             src="{{@unit.publicUri}}/templates/role-listing.hbs" type="text/x-handlebars-template"></script>
     {{js "js/role-listing.js"}}
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/public/js/role-listing.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/public/js/role-listing.js
index c47045e309..1915c07184 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/public/js/role-listing.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/public/js/role-listing.js
@@ -21,158 +21,22 @@ var loadRoleBasedActionURL = function (action, rolename) {
     $(location).attr('href', href);
 };
 
-var apiBasePath = "/api/device-mgt/v1.0";
-
-/**
- * Following function would execute
- * when a user clicks on the list item
- * initial mode and with out select mode.
- */
-function InitiateViewOption() {
-    $(location).attr('href', $(this).data("url"));
-}
-
-/**
- * Sorting function of roles
- * listed on Role Management page in WSO2 Devicemgt Console.
- */
-
-//var loadPaginatedObjects = function (objectGridId, objectGridContainer, objectGridTemplateSrc, serviceURL, callback) {
-//    var templateSrc = $(objectGridTemplateSrc).attr("src");
-//    $.template(objectGridId, templateSrc, function (template) {
-//        invokerUtil.get(serviceURL,
-//            function (data) {
-//                data = callback(data);
-//                if (data.length > 0 && data != null) {
-//                    $('#ast-container').removeClass('hidden');
-//                    $('#role-listing-status').hide();
-//                    for (var i = 0; i < data.viewModel.roles.length; i++) {
-//                        data.viewModel.roles[i].adminRole = $("#role-table").data("role");
-//                    }
-//                    var content = template(data.viewModel);
-//                    $(objectGridContainer).html(content);
-//                    if (isInit) {
-//                        $('#role-grid').datatables_extended_serverside_paging();
-//                        isInit = false;
-//                    }
-//                    $("#dt-select-all").addClass("hidden");
-//                    $(".icon .text").res_text(0.2);
-//                } else {
-//                    $('#ast-container').addClass('hidden');
-//                    $('#role-listing-status-msg').text('No roles are available to be displayed.');
-//                    $('#role-listing-status').show();
-//                }
-//
-//                //$(objectGridId).datatables_extended();
-//            }, function (message) {
-//                $('#ast-container').addClass('hidden');
-//                $('#role-listing-status-msg').text('Invalid search query. Try again with a valid search ' +
-//                    'query');
-//                $('#role-listing-status').show();
-//            });
-//    });
-//};
-
-function loadRoles() {
-    var loadingContent = $("#loading-content");
-    loadingContent.show();
-
-    var dataFilter = function (data) {
-        data = JSON.parse(data);
-
-        var objects = [];
-
-        $(data.roles).each(function( index ) {
-            objects.push({name: data.roles[index], DT_RowId : "role-" + data.roles[index]})
-        });
-
-        var json = {
-            "recordsTotal": data.count,
-            "recordsFiltered": data.count,
-            "data": objects
-        };
-
-        return JSON.stringify(json);
-    };
-
-    //noinspection JSUnusedLocalSymbols
-    var fnCreatedRow = function (nRow, aData, iDataIndex) {
-        $(nRow).attr('data-type', 'selectable');
-    };
-
-    //noinspection JSUnusedLocalSymbols
-    var columns = [
-        {
-            class: "remove-padding icon-only content-fill",
-            data: null,
-            defaultContent: '<div class="thumbnail icon"> <i class="square-element text fw fw-user" style="font-size: 30px;"></i></div>'
-        },
-        {
-            class: "fade-edge remove-padding-top",
-            data: "name",
-            defaultContent: ''
-        },
-        {
-            class: "text-right content-fill text-left-on-grid-view no-wrap",
-            data: null,
-            render: function (data, type, row, meta) {
-                return '<a onclick="javascript:loadRoleBasedActionURL(\'edit\', \'' + data.name + '\')" ' +
-                    'data-role="' + data.name + '" ' +
-                    'data-click-event="edit-form" ' +
-                    'class="btn padding-reduce-on-grid-view edit-role-link">' +
-                    '<span class="fw-stack fw-lg">' +
-                    '<i class="fw fw-ring fw-stack-2x"></i>' +
-                    '<i class="fw fw-user fw-stack-1x"></i>' +
-                    '<span class="fw-stack fw-move-right fw-move-bottom">' +
-                    '<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-edit fw-stack-1x fw-inverse"></i>' +
-                    '</span>' +
-                    '</span>' +
-                    '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Edit</span>' +
-                    '</a>' +
-                    '<a onclick="javascript:loadRoleBasedActionURL(\'edit-permission\', \'' + data.name + '\')" ' +
-                    'data-role="' + data.name + '" ' +
-                    'data-click-event="edit-form" ' +
-                    'class="btn padding-reduce-on-grid-view edit-permission-link">' +
-                    '<span class="fw-stack fw-lg">' +
-                    '<i class="fw fw-ring fw-stack-2x"></i>' +
-                    '<i class="fw fw-security-policy fw-stack-1x"></i>' +
-                    '<span class="fw-stack fw-move-right fw-move-bottom">' +
-                    '<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-edit fw-stack-1x fw-inverse"></i>' +
-                    '</span>' +
-                    '</span>' +
-                    '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Edit Permission</span>' +
-                    '</a>' +
-                    '<a data-role="' + data.name + '" ' +
-                    'data-click-event="remove-form" ' +
-                    'class="btn padding-reduce-on-grid-view remove-role-link">' +
-                    '<span class="fw-stack">' +
-                    '<i class="fw fw-ring fw-stack-2x"></i>' +
-                    '<i class="fw fw-delete fw-stack-1x"></i>' +
-                    '</span>' +
-                    '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Remove</span>' +
-                    '</a>';
-            }
+$(function () {
+    var sortableElem = '.wr-sortable';
+    $(sortableElem).sortable({
+        beforeStop: function () {
+            $(this).sortable('toArray');
         }
-    ];
-
-    var options = {
-        "placeholder": "Search By Role Name",
-        "searchKey" : "filter"
-    };
-
-    $('#role-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/roles', dataFilter, columns, fnCreatedRow, null, options);
-
-    loadingContent.hide();
-
-}
+    });
+    $(sortableElem).disableSelection();
+});
 
+var apiBasePath = "/api/device-mgt/v1.0";
 var modalPopup = ".wr-modalpopup";
 var modalPopupContainer = modalPopup + " .modalpopup-container";
 var modalPopupContent = modalPopup + " .modalpopup-content";
 var body = "body";
-var isInit = true;
+$(".icon .text").res_text(0.2);
 
 
 /*
@@ -199,6 +63,119 @@ function hidePopup() {
     $(modalPopup).hide();
 }
 
+/**
+ * Following function would execute
+ * when a user clicks on the list item
+ * initial mode and with out select mode.
+ */
+function InitiateViewOption() {
+    $(location).attr('href', $(this).data("url"));
+}
+
+function loadRoles() {
+    var loadingContent = $("#loading-content");
+    loadingContent.show();
+
+    var dataFilter = function (data) {
+        data = JSON.parse(data);
+
+        var objects = [];
+
+        $(data.roles).each(function( index ) {
+            objects.push(
+                {
+                    name: data.roles[index],
+                    DT_RowId: "role-" + data.roles[index]
+                }
+            )
+        });
+
+        var json = {
+            "recordsTotal": data.count,
+            "recordsFiltered": data.count,
+            "data": objects
+        };
+
+        return JSON.stringify(json);
+    };
+
+    //noinspection JSUnusedLocalSymbols
+    var fnCreatedRow = function (nRow, aData, iDataIndex) {
+        $(nRow).attr('data-type', 'selectable');
+    };
+
+    //noinspection JSUnusedLocalSymbols
+    var columns = [
+        {
+            class: "remove-padding icon-only content-fill",
+            data: null,
+            defaultContent: "<div class='thumbnail icon'>" +
+                                "<i class='square-element text fw fw-bookmark' style='font-size: 30px;'></i>" +
+                            "</div>"
+        },
+        {
+            class: "fade-edge",
+            data: "name",
+            render: function (name, type, row, meta) {
+                return '<h4>&nbsp;&nbsp;' + name + '&nbsp;role</h4>';
+            }
+        },
+        {
+            class: "text-right content-fill text-left-on-grid-view no-wrap",
+            data: null,
+            render: function (data, type, row, meta) {
+                return '&nbsp;' +
+                    '<a onclick="javascript:loadRoleBasedActionURL(\'edit\', \'' + data.name + '\')" ' +
+                    'data-role="' + data.name + '" ' +
+                    'data-click-event="edit-form" ' +
+                    'class="btn padding-reduce-on-grid-view edit-role-link">' +
+                    '<span class="fw-stack">' +
+                    '<i class="fw fw-ring fw-stack-2x"></i>' +
+                    '<i class="fw fw-bookmark fw-stack-1x"></i>' +
+                    '<span class="fw-stack fw-move-right fw-move-bottom">' +
+                    '<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-edit fw-stack-1x fw-inverse"></i>' +
+                    '</span>' +
+                    '</span>' +
+                    '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Edit</span>' +
+                    '</a>' +
+                    '&nbsp;<a onclick="javascript:loadRoleBasedActionURL(\'edit-permission\', \'' + data.name + '\')" ' +
+                    'data-role="' + data.name + '" ' +
+                    'data-click-event="edit-form" ' +
+                    'class="btn padding-reduce-on-grid-view edit-permission-link">' +
+                    '<span class="fw-stack">' +
+                    '<i class="fw fw-ring fw-stack-2x"></i>' +
+                    '<i class="fw fw-security-policy fw-stack-1x"></i>' +
+                    '<span class="fw-stack fw-move-right fw-move-bottom">' +
+                    '<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-edit fw-stack-1x fw-inverse"></i>' +
+                    '</span>' +
+                    '</span>' +
+                    '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Edit Permission</span>' +
+                    '</a>' +
+                    '&nbsp;<a data-role="' + data.name + '" ' +
+                    'data-click-event="remove-form" ' +
+                    'class="btn padding-reduce-on-grid-view remove-role-link">' +
+                    '<span class="fw-stack">' +
+                    '<i class="fw fw-ring fw-stack-2x"></i>' +
+                    '<i class="fw fw-delete fw-stack-1x"></i>' +
+                    '</span>' +
+                    '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Remove</span>' +
+                    '</a>';
+            }
+        }
+    ];
+
+    var options = {
+        "placeholder": "Search By Role Name",
+        "searchKey" : "filter"
+    };
+
+    $('#role-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/roles', dataFilter, columns, fnCreatedRow, null, options);
+    loadingContent.hide();
+
+}
+
 /**
  * Following click function would execute
  * when a user clicks on "Remove" link
@@ -235,17 +212,6 @@ $("#role-grid").on("click", ".remove-role-link", function () {
     });
 });
 
-//$("#search-btn").click(function () {
-//    var searchQuery = $("#search-by-name").val();
-//    if (searchQuery.trim() != "") {
-//        loadRoles(searchQuery);
-//    } else {
-//        loadRoles();
-//    }
-//});
-
 $(document).ready(function () {
-    $('#role-listing-status').hide();
     loadRoles();
-    isInit = true;
 });
\ No newline at end of file