diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js
index 99a7d6827..69c6792d0 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/roles.js
@@ -35,7 +35,10 @@ $(function() {
          var roles = $.map(data.role, function(item) {
              return mapRole(item);
          });
-         $("#main-content").html($("#rolesGrid").tmpl(data));
+
+         $("#main-content").html($("#rolesTabs").tmpl());
+         $("#main-content #roles-view-tabs-content #roles-view").html($("#rolesGrid").tmpl(data));
+         activateRolesGridTab();
        }
       }
     );
@@ -48,4 +51,20 @@ $(function() {
     return new role(data.name, data.description);
   }
 
+  activateRolesGridTab=function(){
+    $("#main-content #roles-view-tabs li").removeClass("active");
+    $("#main-content #roles-view-tabs-content div").removeClass("active");
+    // activate roles grid tab
+    $("#main-content #roles-view-tabs-content #roles-view").addClass("active");
+    $("#main-content #roles-view-tabs-li-roles-grid").addClass("active");
+  }
+
+  activateRoleEditTab=function(){
+    $("#main-content #roles-view-tabs li").removeClass("active");
+    $("#main-content #roles-view-tabs-content div").removeClass("active");
+    // activate role edit tab
+    $("#main-content #roles-view-tabs-content #role-edit").addClass("active");
+    $("#roles-view-tabs-li-roles-edit").addClass("active");
+  }
+
 });
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html
index 2d8989df1..fcd03bacb 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/roles-tmpl.html
@@ -1,7 +1,4 @@
 <script id="rolesGrid"  type="text/x-jquery-tmpl">
-  <div class="page-header">
-    <h2>${$.i18n.prop('roles.list')}</h2>
-  </div>
   <table class="bordered-table zebra-striped" id="rolesTable">
     <thead>
       <tr>
@@ -18,4 +15,25 @@
       {{/each}}
     </tbody>
   </table>
+</script>
+
+<script id="rolesTabs" type="text/x-jquery-tmpl">
+  <div class="page-header">
+    <h2>${$.i18n.prop('roles.list')}</h2>
+  </div>
+
+  <ul id="roles-view-tabs" class="tabs">
+    <li class="active" id="roles-view-tabs-li-roles-grid">
+      <a href="#roles-view">${$.i18n.prop('roles.grid.tab.title')}</a>
+    </li>
+    <li id="roles-view-tabs-li-roles-edit">
+      <a href="#role-edit">${$.i18n.prop('role.edit')}</a>
+    </li>
+  </ul>
+  <div id="roles-view-tabs-content" class="tab-content">
+    <div id="roles-view">
+    </div>
+    <div id="role-edit"></div>
+  </div>
+
 </script>
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html
index 704cb068c..a812af8eb 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/templates/user-grids.html
@@ -101,7 +101,7 @@
     <div id="users-view-tabs-content" class="tab-content">
       <div id="users-view">
         <button data-bind='click: sortByName'  class="btn">
-          Sort by name
+            ${$.i18n.prop('users.sort.byname')}
         </button>
         <table class="bordered-table zebra-striped" data-bind="simpleGrid: gridViewModel" id="usersTable"></table>
         <div id="usersPagination"></div>