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/pages/cdmf.page.roles/public/js/role-listing.js
similarity index 97%
rename from 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
rename to components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/public/js/role-listing.js
index 1915c07184f..15ce9a1b483 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/pages/cdmf.page.roles/public/js/role-listing.js
@@ -110,8 +110,8 @@ function loadRoles() {
             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>"
+                "<i class='square-element text fw fw-bookmark' style='font-size: 30px;'></i>" +
+                "</div>"
         },
         {
             class: "fade-edge",
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/public/templates/role-listing.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/public/templates/role-listing.hbs
similarity index 100%
rename from components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/public/templates/role-listing.hbs
rename to components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/public/templates/role-listing.hbs
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/roles.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/roles.hbs
index 81007c57188..e22b85db058 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/roles.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/roles.hbs
@@ -47,5 +47,113 @@
 {{/zone}}
 
 {{#zone "content"}}
-    {{unit "cdmf.unit.role.listing"}}
+{{!
+Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+
+WSO2 Inc. licenses this file to you under the Apache License,
+Version 2.0 (the "License"); you may not use this file except
+in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+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" />
+        {{/if}}
+        {{#if editPermitted}}
+            <input type="hidden" id="can-edit" value="true" />
+        {{/if}}
+        <i class="fw fw-settings fw-spin fw-2x"></i>
+        Loading roles . . .
+        <br>
+    </div>
+
+    <div id="role-table" data-role={{adminRole}}>
+        <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>By Role Name</th>
+            </tr>
+            <tr class="bulk-action-row">
+                <th colspan="3"></th>
+            </tr>
+            </thead>
+            <tbody id="ast-container"></tbody>
+        </table>
+    </div>
+
+    <div id="content-filter-types" style="display: none">
+        <div class="sort-title">Sort By</div>
+        <div class="sort-options">
+            <th>By Role name</th>
+        </div>
+    </div>
+
+
+    <div id="remove-role-modal-content" class="hide">
+        <div class="content">
+            <div class="row">
+                <div class="col-lg-5 col-md-6 col-centered">
+                    <h3>Do you really want to remove this role ?</h3>
+
+                    <div class="buttons">
+                        <a href="#" id="remove-role-yes-link" class="btn-operations">
+                            Remove
+                        </a>
+                        <a href="#" id="remove-role-cancel-link" class="btn-operations">
+                            Cancel
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="remove-role-success-content" class="hide">
+        <div class="content">
+            <div class="row">
+                <div class="col-lg-5 col-md-6 col-centered">
+                    <h3>Done. Role was successfully removed.</h3>
+
+                    <div class="buttons">
+                        <a href="#" id="remove-role-success-link" class="btn-operations">
+                            Ok
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="remove-role-error-content" class="hide">
+        <div class="content">
+            <div class="row">
+                <div class="col-lg-5 col-md-6 col-centered">
+                    <h3>An unexpected error occurred. Please try again later.</h3>
+
+                    <div class="buttons">
+                        <a href="#" id="remove-role-error-link" class="btn-operations">
+                            Ok
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{{/zone}}
+
+{{#zone "bottomJs"}}
+    <!--suppress HtmlUnknownTarget -->
+    <script id="role-listing" data-current-user="{{currentUser.username}}"
+            src="{{@page.publicUri}}/templates/role-listing.hbs" type="text/x-handlebars-template"></script>
+    {{js "js/role-listing.js"}}
 {{/zone}}
\ No newline at end of file
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/roles.js
similarity index 88%
rename from components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.js
rename to components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/roles.js
index d908da5d2d3..341720e9a8e 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/roles.js
@@ -18,8 +18,8 @@
 
 function onRequest(context) {
     var userModule = require("/app/modules/business-controllers/user.js")["userModule"];
-    var response = userModule.getUsers();
-    var users = {};
+    var deviceMgtProps = require("/app/modules/conf-reader/main.js")["conf"];
+
     context["permissions"] = userModule.getUIPermissions();
     if (userModule.isAuthorized("/permission/admin/device-mgt/roles/delete")) {
         context["removePermitted"] = true;
@@ -30,8 +30,9 @@ function onRequest(context) {
     if (userModule.isAuthorized("/permission/admin/device-mgt/roles/remove")) {
         context["removePermitted"] = true;
     }
-    var deviceMgtProps = require("/app/modules/conf-reader/main.js")["conf"];
-    context["appContext"] = deviceMgtProps.appContext;
-    context["adminRole"] = deviceMgtProps.adminRole;
+
+    context["appContext"] = deviceMgtProps["appContext"];
+    context["adminRole"] = deviceMgtProps["adminRole"];
+
     return context;
 }
\ No newline at end of file
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
deleted file mode 100644
index a368502c91a..00000000000
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.hbs
+++ /dev/null
@@ -1,115 +0,0 @@
-{{!
-  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
-
-  WSO2 Inc. licenses this file to you under the Apache License,
-  Version 2.0 (the "License"); you may not use this file except
-  in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing,
-  software distributed under the License is distributed on an
-  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, either express or implied. See the License for the
-  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" />
-    {{/if}}
-    {{#if editPermitted}}
-        <input type="hidden" id="can-edit" value="true" />
-    {{/if}}
-    <i class="fw fw-settings fw-spin fw-2x"></i>
-    Loading roles . . .
-    <br>
-</div>
-
-<div id="role-table" data-role={{adminRole}}>
-    <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>By Role Name</th>
-        </tr>
-        <tr class="bulk-action-row">
-            <th colspan="3"></th>
-        </tr>
-        </thead>
-        <tbody id="ast-container"></tbody>
-    </table>
-</div>
-
-<div id="content-filter-types" style="display: none">
-    <div class="sort-title">Sort By</div>
-    <div class="sort-options">
-        <th>By Role name</th>
-    </div>
-</div>
-
-
-<div id="remove-role-modal-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Do you really want to remove this role ?</h3>
-
-                <div class="buttons">
-                    <a href="#" id="remove-role-yes-link" class="btn-operations">
-                        Remove
-                    </a>
-                    <a href="#" id="remove-role-cancel-link" class="btn-operations">
-                        Cancel
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="remove-role-success-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>Done. Role was successfully removed.</h3>
-
-                <div class="buttons">
-                    <a href="#" id="remove-role-success-link" class="btn-operations">
-                        Ok
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div id="remove-role-error-content" class="hide">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>An unexpected error occurred. Please try again later.</h3>
-
-                <div class="buttons">
-                    <a href="#" id="remove-role-error-link" class="btn-operations">
-                        Ok
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{#zone "common-navigation"}}
-    <!--Later add the navigation menu from here-->
-{{/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"}}
-    <script type="text/javascript">
-        var clientJsAppContext = "{{{@app.context}}}";
-    </script>
-{{/zone}}
\ No newline at end of file
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.json b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.json
deleted file mode 100644
index b88788f78bc..00000000000
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.listing/listing.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "version" : "1.0.0"
-}
\ No newline at end of file