diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.role.create/create.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.role.create/create.hbs
index ce2b46759f..45411b407f 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.role.create/create.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.role.create/create.hbs
@@ -88,17 +88,25 @@
                             <label class="wr-input-label">
                                 ( {{roleNameHelpText}} )
                             </label>
-
+                            {{#if isCloud}}
+                            <div id="roleNameField" class="form-group wr-input-control input-group">
+                                <!--suppress HtmlFormInputWithoutLabel -->
+                                <span class="input-group-addon" id="basic-addon1">devicemgt</span>
+                                <input aria-describedby="basic-addon1" type="text" id="roleName"
+                                       data-regex="{{roleNameJSRegEx}}"
+                                       data-error-msg="{{roleNameRegExViolationErrorMsg}}" class="form-control"/>
+                            {{else}}
                             <div id="roleNameField" class="form-group wr-input-control">
                                 <!--suppress HtmlFormInputWithoutLabel -->
                                 <input type="text" id="roleName" data-regex="{{roleNameJSRegEx}}"
                                        data-error-msg="{{roleNameRegExViolationErrorMsg}}" class="form-control"/>
-                                <span class="roleNameError hidden glyphicon glyphicon-remove form-control-feedback"></span>
-                                <label class="error roleNameEmpty hidden" for="summary">
-                                    Role name is required, should be in minimum 3 characters long and not include any
-                                    whitespaces or "@" character or "/" character.
-                                </label>
-                            </div>
+                            {{/if}}
+                            <span class="roleNameError hidden glyphicon glyphicon-remove form-control-feedback"></span>
+                            <label class="error roleNameEmpty hidden" for="summary">
+                                Role name is required, should be in minimum 3 characters long and not include any
+                                whitespaces or "@" character or "/" character.
+                            </label>
+                        </div>
                             {{#if canViewUsers}}
                                 <label class="wr-input-label">
                                     User list
@@ -110,33 +118,33 @@
                                 </div>
                             {{/if}}
                         </div>
+                        </div>
+                        <br>
+                        <button id="add-role-btn" class="wr-btn">Add Role</button>
                     </div>
-                    <br>
-                    <button id="add-role-btn" class="wr-btn">Add Role</button>
                 </div>
-            </div>
-            <div id="role-created-msg" class="container col-centered wr-content hidden">
-                <div class="wr-form">
-                    <p class="page-sub-title">Role was added successfully.</p>
-                    <br>Please click <b>"Add Another Role"</b>, if you wish to add another role or click
-                    <b>"View Role List"</b> to complete the process and go back to the role list.
-                    <hr/>
-                    <button class="wr-btn" onclick="window.location.href='{{@app.context}}/roles'">
-                        View Role List
-                    </button>
-                    <!--suppress HtmlUnknownTarget -->
-                    <a href="{{@app.context}}/role/add" class="cu-btn-inner">
+                <div id="role-created-msg" class="container col-centered wr-content hidden">
+                    <div class="wr-form">
+                        <p class="page-sub-title">Role was added successfully.</p>
+                        <br>Please click <b>"Add Another Role"</b>, if you wish to add another role or click
+                        <b>"View Role List"</b> to complete the process and go back to the role list.
+                        <hr/>
+                        <button class="wr-btn" onclick="window.location.href='{{@app.context}}/roles'">
+                            View Role List
+                        </button>
+                        <!--suppress HtmlUnknownTarget -->
+                        <a href="{{@app.context}}/role/add" class="cu-btn-inner">
                         <span class="fw-stack">
                             <i class="fw fw-circle-outline fw-stack-2x"></i>
                             <i class="fw fw-add fw-stack-1x"></i>
                         </span>
-                        Add Another Role
-                    </a>
+                            Add Another Role
+                        </a>
+                    </div>
                 </div>
+                <!-- /content -->
+                <div id="app-context" data-app-context="{{@app.context}}" class="hidden"></div>
             </div>
-            <!-- /content -->
-            <div id="app-context" data-app-context="{{@app.context}}" class="hidden"></div>
-        </div>
         </div>
         <!-- /content/body -->
     {{else}}
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.hbs
index e9c4527578..979b5c1450 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.hbs
@@ -19,11 +19,11 @@
 <div class="row">
     <div class="col-md-12">
         <!-- content -->
-        <div id="role-create-form" class="container col-centered wr-content">
+        <div id="role-create-form" data-cloud={{isCloud}} class="container col-centered wr-content">
             <div class="wr-form">
                 <p class="page-sub-title">Edit Role</p>
                 <p>Please note that * sign represents required fields of data.</p>
-                <hr />
+                <hr/>
                 <div class="row">
                     <div class="col-lg-8">
                         <div id="role-create-error-msg" class="alert alert-danger hidden" role="alert">
@@ -42,46 +42,58 @@
                         <label class="wr-input-label" id="roleNameValidationText">
                             ( {{roleNameHelpText}} )
                         </label>
+                        {{#if isCloud}}
+                        <div id="roleNameField" class="form-group wr-input-control input-group">
+                            <!--suppress HtmlFormInputWithoutLabel -->
+                            <span class="input-group-addon" id="basic-addon1">devicemgt</span>
+                            <input aria-describedby="basic-addon1" type="text" id="rolename"
+                                   data-regex="{{roleNameJSRegEx}}"
+                                   data-errormsg="{{roleNameRegExViolationErrorMsg}}" class="form-control"
+                                   data-currentrole="{{role.roleName}}"
+                                   value="{{role.roleName}}"/>
+
+                        {{else}}
                         <div id="roleNameField" class="form-group wr-input-control">
                             <input type="text" id="rolename" data-regex="{{roleNameJSRegEx}}"
                                    data-errormsg="{{roleNameRegExViolationErrorMsg}}" class="form-control"
                                    data-currentrole="{{role.roleName}}"
-                                   value="{{role.roleName}}" />
+                                   value="{{role.roleName}}"/>
+                        {{/if}}
                             <span class=" rolenameError hidden glyphicon glyphicon-remove form-control-feedback"></span>
                             <label class="error rolenameEmpty hidden" for="summary">Role name is required & Should be in
                                 minimum 3 characters long and do not
                                 include any whitespaces. </label>
                         </div>
                     </div>
+                    </div>
+                    <br>
+                    <button id="add-role-btn" class="wr-btn">Update Role</button>
                 </div>
-                <br>
-                <button id="add-role-btn" class="wr-btn">Update Role</button>
             </div>
-        </div>
-        <div id="role-created-msg" class="container col-centered wr-content hidden">
-            <div class="wr-form">
-                <p class="page-sub-title">Role was updated successfully.</p>
-                <br>Please click <b>"View Updated Role"</b>, if you wish to view the updated role or click
-                <b>"View Role List"</b> to complete the process and go back to the role list.
-                <hr />
-                <button class="wr-btn" onclick="window.location.href='{{@app.context}}/roles'">
-                    View Role List
-                </button>
-                <a href="{{@app.context}}/roles/edit-role/{{role.roleName}}"
-                   class="cu-btn-inner">
+            <div id="role-created-msg" class="container col-centered wr-content hidden">
+                <div class="wr-form">
+                    <p class="page-sub-title">Role was updated successfully.</p>
+                    <br>Please click <b>"View Updated Role"</b>, if you wish to view the updated role or click
+                    <b>"View Role List"</b> to complete the process and go back to the role list.
+                    <hr/>
+                    <button class="wr-btn" onclick="window.location.href='{{@app.context}}/roles'">
+                        View Role List
+                    </button>
+                    <a href="{{@app.context}}/roles/edit-role/{{role.roleName}}"
+                       class="cu-btn-inner">
                         <span class="fw-stack">
                             <i class="fw fw-circle-outline fw-stack-2x"></i>
                             <i class="fw fw-add fw-stack-1x"></i>
                         </span>
-                    View Updated Role
-                </a>
+                        View Updated Role
+                    </a>
+                </div>
             </div>
+            <!-- /content -->
+            <div id="app-context" data-app-context="{{@app.context}}" class="hidden"></div>
         </div>
-        <!-- /content -->
-        <div id="app-context" data-app-context="{{@app.context}}" class="hidden"></div>
     </div>
-</div>
-<!-- /content/body -->
-{{#zone "bottomJs"}}
-    {{js "js/bottomJs.js"}}
-{{/zone}}
+    <!-- /content/body -->
+    {{#zone "bottomJs"}}
+        {{js "js/bottomJs.js"}}
+    {{/zone}}
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.js
index 9bca327597..d5c363ef1f 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/edit.js
@@ -29,6 +29,7 @@ function onRequest(context) {
     var roleName = request.getParameter("rolename");
     var response;
     var userStore;
+    context.isCloud = deviceMgtProps.isCloud;
 
     if (roleName) {
         if (roleName.indexOf("/") > -1) {
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/public/js/bottomJs.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/public/js/bottomJs.js
index 7dae919969..6ae0e8016f 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/public/js/bottomJs.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.role.edit/public/js/bottomJs.js
@@ -83,18 +83,18 @@ clearInline["role-name"] = function () {
  */
 validateInline["role-name"] = function () {
     var rolenameinput = $("input#rolename");
-    if (inputIsValid( rolenameinput.data("regex"), rolenameinput.val())) {
+    if (inputIsValid(rolenameinput.data("regex"), rolenameinput.val())) {
         disableInlineError("roleNameField", "rolenameEmpty", "rolenameError");
     } else {
         enableInlineError("roleNameField", "rolenameEmpty", "rolenameError");
     }
 };
 
-function formatRepo (user) {
+function formatRepo(user) {
     if (user.loading) {
         return user.text
     }
-    if (!user.username){
+    if (!user.username) {
         return;
     }
     var markup = '<div class="clearfix">' +
@@ -102,7 +102,7 @@ function formatRepo (user) {
         '<div class="clearfix">' +
         '<div class="col-sm-3">' + user.username + '</div>';
     if (user.firstname) {
-        markup +=  '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + user.firstname + '</div>';
+        markup += '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + user.firstname + '</div>';
     }
     if (user.emailAddress) {
         markup += '<div class="col-sm-2"><i class="fa fa-star"></i> ' + user.emailAddress + '</div></div>';
@@ -111,14 +111,14 @@ function formatRepo (user) {
     return markup;
 }
 
-function formatRepoSelection (user) {
+function formatRepoSelection(user) {
     return user.username || user.text;
 }
 
 $(document).ready(function () {
     var appContext = $("#app-context").data("app-context");
     $("#users").select2({
-        multiple:true,
+        multiple: true,
         tags: false,
         ajax: {
             url: appContext + "/api/invoker/execute/",
@@ -148,23 +148,29 @@ $(document).ready(function () {
             },
             cache: true
         },
-        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
+        escapeMarkup: function (markup) {
+            return markup;
+        }, // let our custom formatter work
         minimumInputLength: 1,
         templateResult: formatRepo, // omitted for brevity, see the source of this page
         templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
     });
 
 
-
     /**
      * Following click function would execute
      * when a user clicks on "Add Role" button
      * on Add Role page in WSO2 MDM Console.
      */
-    $("button#add-role-btn").click(function() {
+    $("button#add-role-btn").click(function () {
+        var isCloud = $("#role-create-form").data("cloud");
         var rolenameInput = $("input#rolename");
         var roleName = rolenameInput.val();
         var currentRoleName = $("input#rolename").data("currentrole");
+        if (isCloud) {
+
+            currentRoleName = "devicemgt" + currentRoleName;
+        }
         var domain = $("#domain").val();
         var errorMsgWrapper = "#role-create-error-msg";
         var errorMsg = "#role-create-error-msg span";
@@ -182,12 +188,17 @@ $(document).ready(function () {
             $(errorMsgWrapper).removeClass("hidden");
         } else {
             var addRoleFormData = {};
-            addRoleFormData.roleName = roleName;
+            if (isCloud) {
+                addRoleFormData.roleName = "devicemgt" + roleName;
+            } else {
+                addRoleFormData.roleName = roleName;
+            }
             var addRoleAPI = apiBasePath + "/roles/" + encodeURIComponent(currentRoleName);
-            if (domain != "PRIMARY"){
+            if (domain != "PRIMARY") {
                 addRoleFormData.roleName = domain + "/" + roleName;
                 addRoleAPI = addRoleAPI + "?user-store=" + encodeURIComponent(domain);
             }
+
             invokerUtil.put(
                 addRoleAPI,
                 addRoleFormData,
@@ -201,6 +212,7 @@ $(document).ready(function () {
                         $("#role-created-msg").removeClass("hidden");
                     }
                 }, function (data) {
+
                     var payload = JSON.parse(data.responseText);
                     $(errorMsg).text(payload.message);
                     $(errorMsgWrapper).removeClass("hidden");
@@ -209,11 +221,11 @@ $(document).ready(function () {
         }
     });
 
-    $("#rolename").focus(function() {
+    $("#rolename").focus(function () {
         clearInline["role-name"]();
     });
 
-    $("#rolename").blur(function() {
+    $("#rolename").blur(function () {
         validateInline["role-name"]();
     });