diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/js/controllers.js b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/js/controllers.js
index cbe254a1a4..9147e17d5b 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/js/controllers.js
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/js/controllers.js
@@ -183,8 +183,6 @@ module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, $ht
 
 module.controller('UserListCtrl', function($scope, realm, User) {
 	$scope.realm = realm;
-    $scope.users = [];
-    //$scope.search = "Search...";
 
     $scope.searchQuery = function() {
         console.log('search: ' + $scope.search);
@@ -253,9 +251,15 @@ module.controller('UserDetailCtrl', function($scope, realm, user, User, $locatio
 	};
 });
 
-module.controller('RoleListCtrl', function($scope, realm, roles) {
+module.controller('RoleListCtrl', function($scope, $location, realm, roles) {
     $scope.realm = realm;
     $scope.roles = roles;
+
+    $scope.$watch(function() {
+        return $location.path();
+    }, function() {
+        $scope.path = $location.path().substring(1).split("/");
+    });
 });
 
 module.controller('RoleDetailCtrl', function($scope, realm, role, Role, $location, Dialog, Notifications) {
@@ -265,6 +269,12 @@ module.controller('RoleDetailCtrl', function($scope, realm, role, Role, $locatio
 
     $scope.changed = $scope.create;
 
+    $scope.$watch(function() {
+        return $location.path();
+    }, function() {
+        $scope.path = $location.path().substring(1).split("/");
+    });
+
     $scope.$watch('role', function() {
         if (!angular.equals($scope.role, role)) {
             $scope.changed = true;
@@ -272,34 +282,28 @@ module.controller('RoleDetailCtrl', function($scope, realm, role, Role, $locatio
     }, true);
 
     $scope.save = function() {
-        if ($scope.roleForm.$valid) {
+        if ($scope.create) {
+            Role.save({
+                realm: realm.id
+            }, $scope.role, function (data, headers) {
+                $scope.changed = false;
+                role = angular.copy($scope.role);
 
-            if ($scope.create) {
-                Role.save({
-                    realm: realm.id
-                }, $scope.role, function (data, headers) {
-                    $scope.changed = false;
-                    role = angular.copy($scope.role);
+                var l = headers().location;
+                var id = l.substring(l.lastIndexOf("/") + 1);
+                $location.url("/realms/" + realm.id + "/roles/" + id);
+                Notifications.success("Created role");
 
-                    var l = headers().location;
-                    var id = l.substring(l.lastIndexOf("/") + 1);
-                    $location.url("/realms/" + realm.id + "/roles/" + id);
-                    Notifications.success("Created role");
-
-                });
-            } else {
-                Role.update({
-                    realm : realm.id,
-                    roleId : role.id
-                }, $scope.role, function() {
-                    $scope.changed = false;
-                    role = angular.copy($scope.role);
-                    Notifications.success("Saved changes to role");
-                });
-            }
-
-         } else {
-            $scope.roleForm.showErrors = true;
+            });
+        } else {
+            Role.update({
+                realm : realm.id,
+                roleId : role.id
+            }, $scope.role, function() {
+                $scope.changed = false;
+                role = angular.copy($scope.role);
+                Notifications.success("Saved changes to role");
+            });
         }
     };
 
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-detail.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-detail.html
index ddf08bc63e..8bd656f9ba 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-detail.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-detail.html
@@ -2,16 +2,24 @@
     <div class="row">
         <div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
         <div id="content-area" class="col-md-9" role="main">
-            <div class="top-nav">
+            <div class="top-nav" data-ng-show="!create">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#">Settings</a></li>
+                    <li><a href="#/create/application/{{realm.id}}">New Application</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/applications/{{application.id}}">Settings</a></li>
                     <li><a href="#">Credentials</a></li>
                     <li><a href="#">Installation</a></li>
                     <li><a href="#">Roles</a></li>
-                    <li><a href="#">Scopes</a></li>
+                    <li><a href="#">Scope</a></li>
                     <li><a href="#">Sessions</a></li>
                 </ul>
             </div>
+            <div class="top-nav" data-ng-show="create">
+                <ul class="rcue-tabs">
+                    <li class="active"><a href="#/create/application/{{realm.id}}">New Application</a></li>
+                    <li><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
+                </ul>
+            </div>
             <div id="content">
                 <h2 class="pull-left" data-ng-show="create">New Application</h2>
                 <h2 class="pull-left" data-ng-hide="create">Application <span>{{application.name}}</span></h2>
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-list.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-list.html
index 4128751ace..174f65d544 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-list.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/application-list.html
@@ -2,18 +2,19 @@
     <div class="row">
         <div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
         <div id="content-area" class="col-md-9" role="main">
-            <div class="top-nav" data-ng-hide="createRealm">
+            <div class="top-nav">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#">Applications</a></li>
                     <li><a href="#/create/application/{{realm.id}}">New Application</a></li>
+                    <li class="active"><a href="#">Applications</a></li>
                 </ul>
             </div>
             <div id="content">
                 <h2 class="pull-left">Applications</h2>
                 <table>
-                    <caption>Table of realm applications</caption>
+                    <caption data-ng-show="applications && applications.length > 0">Table of realm applications</caption>
+                    <caption data-ng-show="!applications || applications.length == 0">No configured applications...</caption>
                     <thead>
-                    <tr>
+                    <tr data-ng-show="applications && applications.length > 5">
                         <th class="rcue-table-actions" colspan="3">
                             <div class="search-comp clearfix">
                                 <input type="text" placeholder="Search..." class="search">
@@ -30,7 +31,7 @@
                         <th>Base URL</th>
                     </tr>
                     </thead>
-                    <tfoot>
+                    <tfoot data-ng-show="applications && applications.length > 5"> <!-- todo -->
                     <tr>
                         <td colspan="3">
                             <div class="table-nav">
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-detail.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-detail.html
index b997e5dc4a..cd3d0ba18b 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-detail.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-detail.html
@@ -4,9 +4,9 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav" data-ng-hide="createRealm">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#">Settings</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}">Settings</a></li>
                     <li data-ng-show="realm.social"><a href="#">Social</a></li>
-                    <li><a href="#">Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
                     <li><a href="#">Required Credentials</a></li>
                     <li><a href="#">Token Settings</a></li>
                 </ul>
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-menu.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-menu.html
index cee7ac9ccb..73f0ae592c 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-menu.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/realm-menu.html
@@ -1,5 +1,5 @@
 <ul data-ng-hide="createRealm">
-    <li data-ng-class="!path[2] && 'active'"><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
+    <li data-ng-class="(!path[2] || path[1] == 'role' || path[2] == 'roles') && 'active'"><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
     <li data-ng-class="(path[2] == 'users' || path[1] == 'user') && 'active'"><a href="#/realms/{{realm.id}}/users">Users</a>
     </li>
     <li data-ng-class="(path[2] == 'applications' || path[1] == 'application') && 'active'"><a href="#/realms/{{realm.id}}/applications">Applications</a></li>
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-detail.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-detail.html
index 0c68075d40..0aeae23552 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-detail.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-detail.html
@@ -1,60 +1,59 @@
 <div id="wrapper" class="container">
     <div class="row">
-        <aside class="span3" data-ng-include data-src="'partials/realm-menu.html'"></aside>
-        <div id="actions-bg"></div>
-
-        <div id="container-right" class="span9">
-            <h1 data-ng-show="create"><span class="gray">New Role</span></h1>
-
-            <h1 data-ng-hide="create">
-                <span class="gray">Realm Role {{role.name}}</span>
-            </h1>
-
-            <div data-ng-show="roleForm.showErrors && roleForm.$error.required" class="alert alert-error">Please fill in
-                all required fields
+        <div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
+        <div id="content-area" class="col-md-9" role="main">
+            <div class="top-nav">
+                <ul class="rcue-tabs">
+                    <li class="active"><a href="#/create/role/{{realm.id}}">New Realm Role</a></li>
+                    <li><a href="#/realms/{{realm.id}}/roles">Realm Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
+                </ul>
             </div>
-            <p class="subtitle subtitle-right" data-ng-show="create"><span class="required">*</span> Required fields</p>
+            <div id="content">
+                <h2 class="pull-left" data-ng-show="create">New Realm Role</h2>
+                <h2 class="pull-left" data-ng-hide="create">Realm Role <span>{{role.name}}</span></h2>
+                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+                <form name="realmForm" novalidate>
+                    <fieldset>
+                        <legend uncollapsed><span class="text">Details</span> </legend>
+                        <div class="form-group">
+                            <label for="name">Role name </label><span class="required" data-ng-show="create">*</span>
 
-            <form class="form-horizontal" name="roleForm" novalidate>
-                <fieldset>
-                    <legend>Details</legend>
-                    <div class="control-group">
-                        <label class="control-label" for="name">Role name <span class="required" data-ng-show="create">*</span></label>
-
-                        <div class="controls">
-                            <input type="text" class="input-xlarge" id="name" name="name" data-ng-model="role.name"
-                                   autofocus required data-ng-readonly="!create">
+                            <div class="controls">
+                                <input type="text" id="name" name="name" data-ng-model="role.name" autofocus
+                                       required data-ng-readonly="!create">
+                            </div>
                         </div>
+                        <div class="form-group">
+                            <label for="description">Description </label>
+
+                            <div class="controls">
+                                <input type="text" id="description" name="description" data-ng-model="role.description" autofocus
+                                       required>
+                            </div>
+                        </div>
+                    </fieldset>
+                    <div class="form-actions" data-ng-show="create">
+                        <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
+                        </button>
+                        <button type="submit" data-ng-click="cancel()" data-ng-click="cancel()"
+                                data-ng-show="changed">Cancel
+                        </button>
                     </div>
 
-                    <div class="control-group">
-                        <label class="control-label" for="description">Description </label>
-
-                        <div class="controls">
-                            <input type="text" class="input-xlarge" id="description" name="description" data-ng-model="role.description">
-                        </div>
+                    <div class="form-actions" data-ng-show="!create">
+                        <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
+                            changes
+                        </button>
+                        <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
+                        </button>
+                        <button type="submit" data-ng-click="remove()" class="danger" data-ng-hide="changed">
+                            Delete
+                        </button>
                     </div>
-                </fieldset>
-                <div class="form-actions" data-ng-show="create">
-                    <button type="submit" data-ng-click="save()" class="btn btn-primary" data-ng-show="changed">Save
-                    </button>
-                    <button type="submit" data-ng-click="cancel()" class="btn" data-ng-click="cancel()"
-                            data-ng-show="changed">Cancel
-                    </button>
-                </div>
 
-                <div class="form-actions" data-ng-show="!create">
-                    <button type="submit" data-ng-click="save()" class="btn btn-primary" data-ng-show="changed">Save
-                        changes
-                    </button>
-                    <button type="submit" data-ng-click="reset()" class="btn" data-ng-show="changed">Clear changes
-                    </button>
-                    <button type="submit" data-ng-click="remove()" class="btn btn-danger" data-ng-hide="changed">
-                        Delete
-                    </button>
-                </div>
-
-            </form>
+                </form>
+            </div>
         </div>
         <div id="container-right-bg"></div>
     </div>
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-list.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-list.html
index 7f27c7cf49..a8194521cf 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-list.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/role-list.html
@@ -1,26 +1,57 @@
 <div id="wrapper" class="container">
     <div class="row">
-        <aside class="span3" data-ng-include data-src="'partials/realm-menu.html'"></aside>
-        <div id="actions-bg"></div>
-
-        <div id="container-right" class="span9">
-            <h1>
-                <span class="gray">Realm Roles</span>
-            </h1>
-
-            <table class="table table-striped table-bordered">
-                <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Description</th>
-                </tr>
-                </thead>
-                <tr data-ng-repeat="role in roles">
-                    <td><a href="#/realms/{{realm.id}}/roles/{{role.id}}">{{role.name}}</a></td>
-                    <td>{{role.description}}</td>
-                </tr>
-            </table>
+        <div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
+        <div id="content-area" class="col-md-9" role="main">
+            <div class="top-nav">
+                <ul class="rcue-tabs">
+                    <li><a href="#/create/role/{{realm.id}}">New Realm Role</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/roles">Realm Roles</a></li>
+                    <li><a href="#/realms/{{realm.id}}">Realm Settings</a></li>
+                </ul>
+            </div>
+            <div id="content">
+                <h2 class="pull-left">Realm Roles</h2>
+                <table>
+                    <caption data-ng-show="roles && roles.length > 0">Table of realm roles</caption>
+                    <caption data-ng-show="!roles || roles.length == 0">No configured realm roles...</caption>
+                    <thead>
+                    <tr data-ng-show="roles && roles.length > 5">
+                        <th class="rcue-table-actions" colspan="2">
+                            <div class="search-comp clearfix">
+                                <input type="text" placeholder="Search..." class="search">
+                                <button class="icon-search tooltipRightTrigger"
+                                        data-original-title="Search by role name.">
+                                    Icon: search
+                                </button>
+                            </div>
+                        </th>
+                    </tr>
+                    <tr>
+                        <th>Role Name</th>
+                        <th>Description</th>
+                    </tr>
+                    </thead>
+                    <tfoot data-ng-show="roles && roles.length > 5"> <!-- todo -->
+                    <tr>
+                        <td colspan="2">
+                            <div class="table-nav">
+                                <a href="#" class="first disabled">First page</a><a href="#" class="prev disabled">Previous
+                                page</a><span><strong>1-8</strong> of <strong>10</strong></span><a href="#"
+                                                                                                   class="next">Next
+                                page</a><a href="#" class="last">Last page</a>
+                            </div>
+                        </td>
+                    </tr>
+                    </tfoot>
+                    <tbody class="selectable-rows">
+                    <tr ng-repeat="role in roles">
+                        <td><a href="#/realms/{{realm.id}}/roles/{{role.id}}">{{role.name}}</a></td>
+                        <td>{{role.description}}</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
         <div id="container-right-bg"></div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-detail.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-detail.html
index 0a5f7b27e3..655c7f70e4 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-detail.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-detail.html
@@ -4,12 +4,16 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav" data-ng-show="create">
                 <ul class="rcue-tabs" >
-                    <li class="active"><a href="#">New User</a></li>
-                    <li><a href="#">Users</a></li>
+                    <ul class="rcue-tabs">
+                        <li class="active"><a href="#/create/user/{{realm.id}}">New User</a></li>
+                        <li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
+                    </ul>
                 </ul>
             </div>
             <div class="top-nav" data-ng-show="!create">
                 <ul class="rcue-tabs" >
+                    <li><a href="#/create/user/{{realm.id}}">New User</a></li>
+                    <li><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
                     <li class="active"><a href="#">Attributes</a></li>
                     <li><a href="#">Credentials</a></li>
                     <li><a href="#">Role Mappings</a></li>
diff --git a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-list.html b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-list.html
index 3e1e104288..d87de2ec2a 100755
--- a/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-list.html
+++ b/examples/as7-eap-demo/server/src/main/webapp/saas/admin/partials/user-list.html
@@ -4,14 +4,14 @@
         <div id="content-area" class="col-md-9" role="main">
             <div class="top-nav" data-ng-hide="createRealm">
                 <ul class="rcue-tabs">
-                    <li class="active"><a href="#">Users</a></li>
                     <li><a href="#/create/user/{{realm.id}}">New User</a></li>
+                    <li class="active"><a href="#/realms/{{realm.id}}/users">Query Users</a></li>
                 </ul>
             </div>
             <div id="content">
                 <h2 class="pull-left">Query Users</h2>
                 <table>
-                    <caption>Table of realm users</caption>
+                    <caption data-ng-show="users && search">Table of realm users</caption>
                     <thead>
                     <tr>
                         <th class="rcue-table-actions" colspan="4">
@@ -26,7 +26,7 @@
                         </th>
                     </tr>
                     <tr>
-                    <tr>
+                    <tr data-ng-show="users && search">
                         <th>Username</th>
                         <th>Last Name</th>
                         <th>First Name</th>
@@ -34,7 +34,7 @@
                     </tr>
                     </tr>
                     </thead>
-                    <tfoot>
+                    <tfoot data-ng-show="users && users.length > 10"> <!-- todo -->
                     <tr>
                         <td colspan="4">
                             <div class="table-nav">
@@ -49,9 +49,9 @@
                     <tbody class="selectable-rows">
                     <tr ng-repeat="user in users">
                         <td><a href="#/realms/{{realm.id}}/users/{{user.username}}">{{user.username}}</a></td>
-                        <td>{{user.lastName</td>
-                        <td>{{user.firstName</td>
-                        <td>{{user.email</td>
+                        <td>{{user.lastName}}</td>
+                        <td>{{user.firstName}}</td>
+                        <td>{{user.email}}</td>
                     </tr>
                     </tbody>
                 </table>
diff --git a/services/src/main/java/org/keycloak/services/resources/admin/RealmAdminResource.java b/services/src/main/java/org/keycloak/services/resources/admin/RealmAdminResource.java
index 524b9f839f..32bc8543cf 100755
--- a/services/src/main/java/org/keycloak/services/resources/admin/RealmAdminResource.java
+++ b/services/src/main/java/org/keycloak/services/resources/admin/RealmAdminResource.java
@@ -65,6 +65,7 @@ public class RealmAdminResource {
         List<RoleRepresentation> roles = new ArrayList<RoleRepresentation>();
         for (RoleModel roleModel : roleModels) {
             RoleRepresentation role = new RoleRepresentation(roleModel.getName(), roleModel.getDescription());
+            role.setId(roleModel.getId());
             roles.add(role);
         }
         return roles;