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,7 +21,47 @@ var loadRoleBasedActionURL = function (action, rolename) {
     $(location).attr('href', href);
 };
 
+$(function () {
+    var sortableElem = '.wr-sortable';
+    $(sortableElem).sortable({
+        beforeStop: function () {
+            $(this).sortable('toArray');
+        }
+    });
+    $(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";
+$(".icon .text").res_text(0.2);
+
+
+/*
+ * set popup maximum height function.
+ */
+function setPopupMaxHeight() {
+    $(modalPopupContent).css('max-height', ($(body).height() - ($(body).height() / 100 * 30)));
+    $(modalPopupContainer).css('margin-top', (-($(modalPopupContainer).height() / 2)));
+}
+
+/*
+ * show popup function.
+ */
+function showPopup() {
+    $(modalPopup).show();
+    setPopupMaxHeight();
+}
+
+/*
+ * hide popup function.
+ */
+function hidePopup() {
+    $(modalPopupContent).html('');
+    $(modalPopup).hide();
+}
 
 /**
  * Following function would execute
@@ -32,47 +72,6 @@ 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();
@@ -83,7 +82,12 @@ function loadRoles() {
         var objects = [];
 
         $(data.roles).each(function( index ) {
-            objects.push({name: data.roles[index], DT_RowId : "role-" + data.roles[index]})
+            objects.push(
+                {
+                    name: data.roles[index],
+                    DT_RowId: "role-" + data.roles[index]
+                }
+            )
         });
 
         var json = {
@@ -105,24 +109,29 @@ function loadRoles() {
         {
             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>'
+            defaultContent: "<div class='thumbnail icon'>" +
+                                "<i class='square-element text fw fw-bookmark' style='font-size: 30px;'></i>" +
+                            "</div>"
         },
         {
-            class: "fade-edge remove-padding-top",
+            class: "fade-edge",
             data: "name",
-            defaultContent: ''
+            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 '<a onclick="javascript:loadRoleBasedActionURL(\'edit\', \'' + data.name + '\')" ' +
+                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 fw-lg">' +
+                    '<span class="fw-stack">' +
                     '<i class="fw fw-ring fw-stack-2x"></i>' +
-                    '<i class="fw fw-user fw-stack-1x"></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>' +
@@ -130,11 +139,11 @@ function loadRoles() {
                     '</span>' +
                     '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Edit</span>' +
                     '</a>' +
-                    '<a onclick="javascript:loadRoleBasedActionURL(\'edit-permission\', \'' + data.name + '\')" ' +
+                    '&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 fw-lg">' +
+                    '<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">' +
@@ -144,7 +153,7 @@ function loadRoles() {
                     '</span>' +
                     '<span class="hidden-xs hidden-on-grid-view">&nbsp;&nbsp;Edit Permission</span>' +
                     '</a>' +
-                    '<a data-role="' + data.name + '" ' +
+                    '&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">' +
@@ -163,42 +172,10 @@ function loadRoles() {
     };
 
     $('#role-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/roles', dataFilter, columns, fnCreatedRow, null, options);
-
     loadingContent.hide();
 
 }
 
-var modalPopup = ".wr-modalpopup";
-var modalPopupContainer = modalPopup + " .modalpopup-container";
-var modalPopupContent = modalPopup + " .modalpopup-content";
-var body = "body";
-var isInit = true;
-
-
-/*
- * set popup maximum height function.
- */
-function setPopupMaxHeight() {
-    $(modalPopupContent).css('max-height', ($(body).height() - ($(body).height() / 100 * 30)));
-    $(modalPopupContainer).css('margin-top', (-($(modalPopupContainer).height() / 2)));
-}
-
-/*
- * show popup function.
- */
-function showPopup() {
-    $(modalPopup).show();
-    setPopupMaxHeight();
-}
-
-/*
- * hide popup function.
- */
-function hidePopup() {
-    $(modalPopupContent).html('');
-    $(modalPopup).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