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 fc648ff450..acf56f7963 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
@@ -47,19 +47,6 @@
             <th>By Role Name</th>
             <th class="no-sort"></th>
         </tr>
-        <tr class="filter-row filter-box">
-            <th colspan="2">
-                <label class="wr-input-label" for="search-by-name">
-                    By Role Name
-                </label>
-                <input id="search-by-name" type="text" class="form-control" placeholder="Search By Role Name">
-            </th>
-            <th style="vertical-align:bottom;">
-                <button id="search-btn" class="wr-btn">
-                    Search
-                </button>
-            </th>
-        </tr>
         <tr class="bulk-action-row">
             <th colspan="3"></th>
         </tr>
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 bee418fd1c..1b0991cb0a 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
@@ -16,10 +16,12 @@
  * under the License.
  */
 var loadRoleBasedActionURL = function (action, rolename) {
-    var href = $("#ast-container").data("app-context") + "role/" + action + "/" + rolename;
+    var href = $("#ast-container").data("app-context") + "roles/" + action + "?rolename=" + rolename;
     $(location).attr('href', href);
 };
 
+var apiBasePath = "/api/device-mgt/v1.0";
+
 /**
  * Following function would execute
  * when a user clicks on the list item
@@ -38,34 +40,34 @@ var loadPaginatedObjects = function (objectGridId, objectGridContainer, objectGr
     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();
-                                    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 (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();
             });
     });
 };
@@ -73,46 +75,72 @@ var loadPaginatedObjects = function (objectGridId, objectGridContainer, objectGr
 function loadRoles(searchQuery) {
     var loadingContent = $("#loading-content");
     loadingContent.show();
-    var serviceURL = "/devicemgt_admin/roles";
-    if (searchQuery) {
-        serviceURL = serviceURL + "/search?filter=" + searchQuery;
+
+    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]})
+        });
+
+        json = {
+            "recordsTotal": data.count,
+            "recordsFiltered": data.count,
+            "data": objects
+        };
+
+        return JSON.stringify( json );
     }
-    var callback = function (data) {
-        if (data != null || data == "null") {
-            data = JSON.parse(data);
-            var canRemove = $("#can-remove").val();
-            var canEdit = $("#can-edit").val();
-            var roles = [];
-            for(var i=0; i<data.responseContent.length; i++){
-                roles.push({"roleName":data.responseContent[i]});
-                if(canRemove != null && canRemove != undefined) {
-                    roles[i].canRemove = true;
-                }
 
-                if(canEdit != null && canEdit != undefined) {
-                    roles[i].canEdit = true;
-                }
-            }
+    var fnCreatedRow = function( nRow, aData, iDataIndex ) {
+        $(nRow).attr('data-type', 'selectable');
+    }
 
-            data = {
-                "viewModel": {
-                    "roles": roles
-                },
-                "length": roles.length
+    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-role\', \'' + 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">Edit</span></a>' +
+                    '<a onclick="javascript:loadRoleBasedActionURL(\'edit-role-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">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">Remove</span></a>'
             }
         }
-        return data;
+    ];
+
+    var options = {
+        "placeholder": "Search By Role Name",
+        "searchKey" : "filter"
     };
 
-    loadPaginatedObjects("#role-grid", "#ast-container", "#role-listing", serviceURL, callback);
+    $('#role-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/roles', dataFilter, columns, fnCreatedRow, null, options);
+
     loadingContent.hide();
-    var sortableElem = '.wr-sortable';
-    $(sortableElem).sortable({
-        beforeStop: function () {
-            var sortedIDs = $(this).sortable('toArray');
-        }
-    });
-    $(sortableElem).disableSelection();
+
 }
 
 var modalPopup = ".wr-modalpopup";
@@ -153,7 +181,7 @@ function hidePopup() {
  */
 $("#role-grid").on("click", ".remove-role-link", function () {
     var role = $(this).data("role");
-    var removeRoleAPI = "/devicemgt_admin/roles?rolename=" + role;
+    var removeRoleAPI = apiBasePath + "/roles/" + role;
 
     $(modalPopupContent).html($('#remove-role-modal-content').html());
     showPopup();