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 ec1b22e72..f5bd67b28 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
@@ -67,6 +67,15 @@ $(function() {
         }
       );
     }
+
+    this.updateMode=function(){
+      $("#main-content #role-list-users").hide();
+      $("#main-content #role-edit-users").show();
+    }
+    this.viewMode=function(){
+      $("#main-content #role-edit-users").hide();
+      $("#main-content #role-list-users").show();
+    }
   }
 
   /**
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 79e3841de..9b630d5ed 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
@@ -119,18 +119,23 @@ <h3>${$.i18n.prop('role.edit.users.defined.in.parent.roles')}</h3>
   <div class="page-header">
     <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
   </div>
+  <div id="role-list-users">
+    {{if $data.users}}
+        <ul>
+        {{each users}}
+          <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
+        {{/each}}
+        </ul>
+    {{else}}
+      ${$.i18n.prop('role.edit.no.user.defined')}
+    {{/if}}
 
-  {{if $data.users}}
-      <ul>
-      {{each users}}
-        <li>${$value.fullName} - ( ${$value.username} - ${$value.email} ) </li>
-      {{/each}}
-      </ul>
-  {{else}}
-    ${$.i18n.prop('role.edit.no.user.defined')}
-  {{/if}}
+    <button class="btn" data-bind="click:updateMode">${$.i18n.prop('role.update.mode')}</button>
+
+  </div>
+
+  <div id="role-edit-users" class="clearfix ar-multiselect" style="display:none">
 
-  <div id="role-edit-users" class="clearfix ar-multiselect">
     <div class="ar-multiselect-column ar-multiselect-left">
     <select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers" multiple="true" id="role-edit-available-users"></select>
     </div>
@@ -144,6 +149,8 @@ <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
       <select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true" id="role-edit-affected-users"></select>
     </div>
     <button class="btn" data-bind="click: saveUsers">${$.i18n.prop('save')}</button>
+    <br/>
+    <button class="btn" data-bind="click:viewMode">${$.i18n.prop('role.view.mode')}</button>
   </div>
 
 </script>