diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/archiva.css b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/archiva.css
index 722097550..1c090026f 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/archiva.css
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/archiva.css
@@ -15,4 +15,9 @@
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
- */
\ No newline at end of file
+ */
+
+/* medium-spinner */
+#medium-spinner {
+ z-index: 20001;
+}
\ No newline at end of file
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
index 813e27b40..6dd46900b 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/utils.js
@@ -142,9 +142,21 @@ openDialogConfirm=function(okFn, okMessage, cancelMessage, title,bodyText){
  * return a small spinner html img element
  */
 smallSpinnerImg=function(){
-  return "<img id=\"login-spinner\" src=\"images/small-spinner.gif\"/>";
+  return "<img id=\"small-spinner\" src=\"images/small-spinner.gif\"/>";
 };
 
+removeSmallSpinnerImg=function(){
+  $("#small-spinner").remove();
+}
+
+mediumSpinnerImg=function(){
+  return "<img id=\"medium-spinner\" src=\"images/medium-spinner.gif\"/>";
+};
+
+removeMediumSpinnerImg=function(){
+  $("#small-spinner").remove();
+}
+
 closeDialogConfirm=function(){
   window.modalConfirmDialog.modal('hide');
 }
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
index c1d331ebe..f0a97566b 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/knockout.simpleGrid.js
@@ -18,15 +18,14 @@
         this.data = configuration.data;
         this.currentPageIndex = ko.observable(0);
         this.pageSize = configuration.pageSize || 5;
-        this.pageLinksId = configuration.pageLinksId;
         this.columns = configuration.columns;
 
-        this.itemsOnCurrentPage = ko.dependentObservable(function () {
+        this.itemsOnCurrentPage = ko.computed(function () {
             var startIndex = this.pageSize * this.currentPageIndex();
             return this.data.slice(startIndex, startIndex + this.pageSize);
         }, this);
 
-        this.maxPageIndex = ko.dependentObservable(function () {
+        this.maxPageIndex = ko.computed(function () {
             return Math.ceil(ko.utils.unwrapObservable(this.data).length / this.pageSize);
         }, this);
         this.i18n=function(key){
@@ -58,7 +57,7 @@
           ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode");
 
           // Render the page links
-          var pageLinksContainer = $("#"+viewModel.pageLinksId).get(0);//.appendChild(document.createElement("DIV"));
+          var pageLinksContainer = $("#"+allBindings.pageLinksId).get(0);
           ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode");
         }
     };
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js
index d738f49cd..e2c705432 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/redback.js
@@ -19,7 +19,7 @@
 $(function() {
 
   // define a container object with various datas
-  window.redbackModel = {usersViewModel:null,userOperationNames:null,key:null,userCreate:false,i18n:$.i18n.map};
+  window.redbackModel = {usersViewModel:null,userOperationNames:null,key:null,userCreate:false,i18n:$.i18n.map,rolesViewModel:null};
 
   /**
    * display redback error from redback json error response
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/register.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/register.js
index 691a30eb3..bdcf99071 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/register.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/register.js
@@ -80,7 +80,7 @@ $(function() {
       },
       complete: function(){
         $("#modal-register-ok").removeAttr("disabled");
-        $("#login-spinner").remove();
+        removeSmallSpinnerImg();
       },
       error: function(result) {
         var obj = jQuery.parseJSON(result.responseText);
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 4cd1cc1ed..bc61a5a40 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
@@ -57,9 +57,9 @@ $(function() {
   /**
    * view model used for roles grid
    */
-  rolesViewModel=function() {
+  RolesViewModel=function() {
     this.roles = ko.observableArray([]);
-
+    var self = this;
     this.loadRoles = function() {
       $.ajax("restServices/redbackServices/roleManagementService/allRoles", {
           type: "GET",
@@ -75,12 +75,45 @@ $(function() {
       );
     };
 
+
+    this.gridViewModel = new ko.simpleGrid.viewModel({
+      data: this.roles,
+      viewModel: this,
+      columns: [
+        {
+          headerText: $.i18n.prop('name'),
+          rowText: "name"
+        },
+        {
+          headerText: $.i18n.prop('description'),
+          rowText: "description"
+        }
+      ],
+      pageSize: 10
+    });
+
+    this.editRole=function(role){
+      $("#main-content #roles-view-tabs-content #role-edit").attr("data-bind",'template: {name:"editRoleTab",data: role}');
+
+      var viewModel = new roleViewModel(role);
+      ko.applyBindings(viewModel,$("#main-content #roles-view-tabs-content #role-edit").get(0));
+    }
+
   }
 
 
+
   displayRolesGrid = function(){
     $("#user-messages").html("");
-    $("#main-content").html("");
+    $("#main-content").html(mediumSpinnerImg());
+    window.redbackModel.rolesViewModel = new RolesViewModel();
+    window.redbackModel.rolesViewModel.loadRoles();
+    $("#main-content").html($("#rolesTabs").tmpl());
+    ko.applyBindings(window.redbackModel.rolesViewModel,jQuery("#main-content").get(0));
+    $("#roles-view-tabs").tabs();
+    activateRolesGridTab();
+    removeMediumSpinnerImg();
+    /*
     $.ajax("restServices/redbackServices/roleManagementService/detailledAllRoles",
       {
        type: "GET",
@@ -95,9 +128,13 @@ $(function() {
          $("#main-content #roles-view-tabs-content #roles-view").html($("#rolesGrid").tmpl(data));
          $("#roles-view-tabs").tabs();
          activateRolesGridTab();
+       },
+       complete: function(){
+         removeMediumSpinnerImg();
        }
       }
     );
+    */
   }
 
   editRole = function(roleName){
@@ -123,6 +160,10 @@ $(function() {
 
   }
 
+  roleViewModel=function(role){
+    this.role=role;
+  }
+
   /**
    * @param data Role response from redback rest api
    */
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 5d0e1748b..90e25d91b 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,26 +1,3 @@
-<script id="rolesGrid"  type="text/x-jquery-tmpl">
-  <table class="bordered-table zebra-striped" id="rolesTable">
-    <thead>
-      <tr>
-        <th>${$.i18n.prop('name')}</th>
-        <th>${$.i18n.prop('description')}</th>
-        <th>${$.i18n.prop('edit')}</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{each roles}}
-        <tr>
-          <td>${$value.name}</td>
-          <td>${$value.description}</td>
-          <td>
-            <a href="#" onclick="javascript:editRole(encodeURI('${$value.name}'));">${$.i18n.prop('edit')}</a>
-          </td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
-</script>
-
 <script id="rolesTabs" type="text/x-jquery-tmpl">
   <div class="page-header">
     <h2>${$.i18n.prop('roles.list')}</h2>
@@ -36,6 +13,10 @@
   </ul>
   <div id="roles-view-tabs-content" class="tab-content">
     <div id="roles-view">
+        <table class="bordered-table zebra-striped" id="usersTable"
+               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',simpleGridPagerTemplate:'ko_rolesGrid_pageLinks',pageLinksId:'rolesPagination'">
+        </table>
+        <div id="rolesPagination"></div>
     </div>
     <div id="role-edit"></div>
   </div>
@@ -169,3 +150,41 @@
   {{/if}}
 
 </script>
+
+
+<script id='ko_rolesGrid' type='text/x-jquery-tmpl'>
+  <thead>
+      <tr>
+        {{each(i, columnDefinition) columns}}
+          <th>${ columnDefinition.headerText }</th>
+        {{/each}}
+        <th>${$.i18n.prop('edit')}</th>
+
+      </tr>
+  </thead>
+  <tbody>
+      {{each(i, row) itemsOnCurrentPage()}}
+          <tr>
+              {{each(j, columnDefinition) columns}}
+              <td>${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }</td>
+              {{/each}}
+              <td><a href="#" data-bind="click: function(){ window.redbackModel.rolesViewModel.editRole(row) }">Edit</a></td>
+          </tr>
+      {{/each}}
+  </tbody>
+
+</script>
+
+<script id="ko_rolesGrid_pageLinks" type="text/x-jquery-tmpl">
+  <div class="pagination">
+      <ul>
+      {{each(i) ko.utils.range(1, maxPageIndex)}}
+          <li data-bind="css: { active: i == currentPageIndex() }">
+            <a href="#" data-bind="click: function() { currentPageIndex(i) }">
+              ${ i + 1 }
+            </a>
+          </li>
+      {{/each}}
+      </ul>
+  </div>
+</script>
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 f53392fa2..5a1abb79b 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
@@ -1,13 +1,13 @@
 <script id='ko_usersGrid_grid' type='text/x-jquery-tmpl'>
   <thead>
       <tr>
-          {{each(i, columnDefinition) columns}}
-              <th>${ columnDefinition.headerText }</th>
-          {{/each}}
-          <th>${$.i18n.prop('edit')}</th>
-          <th>${$.i18n.prop('delete')}</th>
-          <th>${$.i18n.prop('user.list.locked')}</th>
-          <th>${$.i18n.prop('user.change.password.required')}</th>
+        {{each(i, columnDefinition) columns}}
+          <th>${ columnDefinition.headerText }</th>
+        {{/each}}
+        <th>${$.i18n.prop('edit')}</th>
+        <th>${$.i18n.prop('delete')}</th>
+        <th>${$.i18n.prop('user.list.locked')}</th>
+        <th>${$.i18n.prop('user.change.password.required')}</th>
       </tr>
   </thead>
   <tbody>
@@ -103,7 +103,9 @@
         <button data-bind='click: sortByName'  class="btn">
             ${$.i18n.prop('users.sort.byname')}
         </button>
-        <table class="bordered-table zebra-striped" data-bind="simpleGrid: gridViewModel" id="usersTable"></table>
+        <table class="bordered-table zebra-striped" id="usersTable"
+               data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_usersGrid_grid',simpleGridPagerTemplate:'ko_usersGrid_pageLinks',pageLinksId:'usersPagination'">
+        </table>
         <div id="usersPagination"></div>
       </div>
       <div id="createUserForm"></div>
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js
index aa141af3c..db46428f2 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/user.js
@@ -316,7 +316,7 @@ $(function() {
    */
   var completeLoginCallbackFn=function(){
     $("#modal-login-ok").removeAttr("disabled");
-    $("#login-spinner").remove();
+    $("#small-spinner").remove();
   }
 
   /**
@@ -532,7 +532,7 @@ $(function() {
 
       },
       complete: function(){
-        $("#login-spinner").remove();
+        $("#small-spinner").remove();
         window.modalChangePasswordBox.modal('hide');
       },
       error: function(result) {
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js
index 61950aee6..085fdc287 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/redback/users.js
@@ -42,7 +42,6 @@ $(function() {
     this.gridViewModel = new ko.simpleGrid.viewModel({
       data: this.users,
       viewModel: this,
-      pageLinksId: "usersPagination",
       columns: [
         {
           headerText: "User Name",
@@ -166,8 +165,6 @@ $(function() {
     */
   displayUsersGrid=function() {
     screenChange();
-    jQuery("#main-content").attr("data-bind","");
-    jQuery("#main-content").html($("#usersGrid").html());
     jQuery("#main-content").attr("data-bind",'template: {name:"usersGrid"}');
     window.redbackModel.usersViewModel = new usersViewModel();
     window.redbackModel.usersViewModel.loadUsers();