From 73d5ccc099ec38c50b917bfe2ce6113fb7b6beca Mon Sep 17 00:00:00 2001
From: Viliam Rockai <vrockai@redhat.com>
Date: Mon, 10 Feb 2014 19:16:59 +0100
Subject: [PATCH] more pages refactored

---
 .../resources/admin-ui/css/admin-console.css  | 109 ++++++-
 .../resources/admin-ui/css/tables.css         |  16 +-
 .../META-INF/resources/admin/js/app.js        |  93 +++++-
 .../partials/application-credentials.html     | 123 ++++----
 .../admin/partials/application-detail.html    | 206 ++++++-------
 .../partials/application-installation.html    |  45 ++-
 .../admin/partials/application-list.html      | 129 ++++-----
 .../partials/application-role-detail.html     | 273 +++++++++---------
 .../admin/partials/application-role-list.html | 145 +++++-----
 .../partials/application-scope-mappings.html  | 183 ++++++------
 .../admin/partials/application-sessions.html  |  45 ++-
 .../partials/oauth-client-credentials.html    | 115 ++++----
 .../admin/partials/oauth-client-detail.html   | 170 +++++------
 .../partials/oauth-client-installation.html   |  36 +--
 .../admin/partials/oauth-client-list.html     | 121 ++++----
 .../partials/oauth-client-scope-mappings.html | 171 ++++++-----
 .../admin/partials/realm-credentials.html     |   4 +-
 .../admin/partials/realm-default-roles.html   |   8 +-
 .../admin/partials/realm-detail.html          |   5 +-
 .../admin/partials/realm-social.html          |   4 +-
 .../resources/admin/partials/role-detail.html | 262 ++++++++---------
 .../resources/admin/partials/role-list.html   |   8 +-
 .../admin/partials/role-mappings.html         | 175 +++++------
 .../admin/partials/user-credentials.html      |  38 ++-
 .../resources/admin/partials/user-detail.html |  82 +++---
 .../resources/admin/partials/user-list.html   | 145 +++++-----
 .../templates/kc-form-control-buttons.html    |  11 +
 27 files changed, 1397 insertions(+), 1325 deletions(-)
 create mode 100644 admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html

diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
index 83938148c6..71388893c7 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
@@ -24,18 +24,24 @@ html, body, body > .container, #view, #content-area{
     border-radius: 2px;
     color: #555;
     cursor: pointer;
-    font-size: 1em;
+    font-size: .9em;
     font-weight: bold;
     line-height: 2.18182em;
     border-radius: 2px;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
     font-weight: bold;
     letter-spacing: 0.04em;
-    padding: 0.307692em 1.07692em;
-    margin: 0.5em;
+    /*padding: 0.307692em 1.07692em;*/
+    padding: 0 1.07692em;
+    /*margin: 0.5em;*/
+    margin: 0;
     display: inline-block;
 }
 
+.kc-button.kc-vertical {
+    display: block;
+}
+
 p.subtitle {
     position: absolute;
     right: 2.5em;
@@ -98,6 +104,66 @@ header .navbar {
     font-weight: bold;
 }
 
+/* Forms */
+
+.kc-link {
+    border: none;
+    background-color: transparent;
+    background: none;
+    box-shadow: none;
+    font-weight: normal;
+    font-size: 1em;
+    color: #0099D3;
+    letter-spacing: 0;
+    padding: 0;
+}
+.kc-link:hover {
+    text-decoration: underline;
+}
+
+.search-comp {
+    position: relative;
+    display: inline-block;
+    font-size: 0.90909090909091em;
+}
+.search-comp input[type="text"] {
+    padding-right: 2.45454545454545em;
+}
+.search-comp .kc-icon-search {
+    position: absolute;
+    right: 0.2em;
+    top: 0.6em;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+}
+.search-comp .kc-icon-search:hover,
+.search-comp .kc-icon-search:active,
+.search-comp .kc-icon-search:focus {
+    background-image: url('img/sprites.png');
+    opacity: 1;
+    filter: alpha(opacity=100);
+    -webkit-transition: ease-in-out opacity 0.25s;
+    -moz-transition: ease-in-out opacity 0.25s;
+    -o-transition: ease-in-out opacity 0.25s;
+    transition: ease-in-out opacity 0.25s;
+}
+.search-comp .kc-icon-search + .tooltip {
+    width: 20em;
+    font-weight: normal;
+}
+.search-comp + span {
+    font-weight: normal;
+    color: #A1A1A1;
+}
+.search-comp + span span {
+    margin-left: 0.45454545454545em;
+    margin-right: 0.45454545454545em;
+    display: inline-block;
+}
+.search-comp + span .link {
+    font-size: 0.90909090909091em;
+}
+
 /* Top menu */
 
 #kc-navigation li.active {
@@ -285,6 +351,17 @@ legend:hover .text {
     vertical-align: text-top;
 }
 
+button[class^="kc-icon-"] {
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    padding: 0;
+    line-height: 1em;
+}
+button[class^="kc-icon-"]:hover {
+    background-image: url(img/sprites.png);
+}
+
 legend .kc-icon-collapse,
 legend .kc-icon-expand {
     background-image: url(../img/icon-collapse-expand.png);
@@ -407,6 +484,19 @@ legend .kc-icon-collapse {
     background-color: #D5ECF9;
 }
 
+/* If input has a button attached to it*/
+
+.kc-button-control {
+    xwidth: auto;
+    display: inline-block;
+}
+
+/* More inputs in one line */
+
+.kc-multiline input {
+    margin-bottom: .35em;
+}
+
 /* Left-Rigth selector form */
 .changing-selectors.application {
     --padding-left: 12em;
@@ -448,7 +538,6 @@ legend .kc-icon-collapse {
 }
 .changing-selectors .middle-buttons {
     display: inline-block;
-    width: 4.5em;
     margin-left: 0.8em;
     margin-right: 0.8em;
     vertical-align: middle;
@@ -464,6 +553,10 @@ legend .kc-icon-collapse {
     margin-right: 0;
 }
 
+.changing-selectors .middle-buttons.kc-vertical .kc-button{
+    display: block;
+}
+
 /* Input file button */
 
 .kc-button-input-file {
@@ -512,4 +605,10 @@ legend .kc-icon-collapse {
 }
 .kc-link-input-file .link:hover {
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+/* Select2 fix for zero-width when nothing is selected */
+.select2-container-multi .select2-choices {
+    min-width: 22em;
+}
+
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
index a5f44fe889..d16f9b7e4b 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
@@ -20,27 +20,27 @@ table thead tr th {
   border-right: 1px #dcdcdc solid;
   text-align: left;
 }
-.rcue-table-actions {
+.kc-table-actions {
   padding: 1px;
   border-top: none;
 }
 /*
-.rcue-table-actions span:last-child {
+.kc-table-actions span:last-child {
   float: right;
 }
 */
-.rcue-table-actions {
+.kc-table-actions {
   padding: 1px;
 }
 /*
-.rcue-table-actions button {
+.kc-table-actions button {
   padding: 3px 8px;
   font-size: 11px;
   box-shadow: 1px 2px 2px #e3e3e3;
   margin: 4px;
 }
 */
-.rcue-table-number {
+.kc-table-number {
   text-align: right;
   width: 100px;
 }
@@ -83,11 +83,11 @@ table tbody tr:hover {
 }
 */
 /* Styles from Gabriel */
-.rcue-table-actions button + button,
-.rcue-table-actions .button + button {
+.kc-table-actions button + button,
+.kc-table-actions .button + button {
   margin-left: 5px;
 }
-.rcue-table-actions div.actions {
+.kc-table-actions div.actions {
   float: right;
   font-size: 0.90909090909091em;
 }
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
index 68bc319cda..7c675c03a1 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
@@ -792,14 +792,9 @@ module.directive('kcNavigation', function ($compile, Notifications) {
                 attrs.kcSocial = false;
             }
         }
-         /*
-        controller: function($scope){
-            $scope.kcSocial = $scope.kcSocial || false;
-        }  */
     }
 });
 
-
 /*
 *  Used to select the element (invoke $(elem).select()) on specified action list.
 *  Usages kc-select-action="click mouseover"
@@ -871,4 +866,92 @@ module.filter('capitalize', function() {
     return function(input) {
         return input.substring(0, 1).toUpperCase() + input.substring(1);
     }
+});
+
+
+/*
+ *   TODO - create directive for form controlls
+ *  Would be used like this:
+ *  <kc-form-control kc-changed="changed" kc-create="createRealm" kc-action-cancel="cancel" kc-action-delete="remove"></kc-form-control>
+ */
+
+module.directive('kcFormControl', function () {
+    return {
+        scope: {
+            kcCreate: "=",
+            kcChanged: "=",
+            kcActionCancel: "&",
+            kcActionRemove: "&"
+        },
+        restrict: 'E',
+        replace: true,
+        templateUrl: "templates/kc-form-control-buttons.html"
+    }
+});
+
+module.directive('kcButtonSave', function ($compile, Notifications) {
+    return {
+        restrict: 'A',
+        replace: true,
+        link: function ($scope, elem, attr, ctrl) {
+            elem.addClass("btn btn-primary btn-lg");
+            elem.attr("type","submit");
+            elem.bind('click', function() {
+                $scope.$apply(function() {
+                    var form = elem.closest('form');
+                    if (form && form.attr('name')) {
+                        if ($scope[form.attr('name')].$valid) {
+                            form.find('.ng-valid').removeClass('error');
+                            $scope['save']();
+                        } else {
+                            Notifications.error("Missing or invalid field(s). Please verify the fields in red.")
+                            form.find('.ng-invalid').addClass('error');
+                            form.find('.ng-valid').removeClass('error');
+                        }
+                    }
+                });
+            })
+        }
+    }
+});
+
+module.directive('kcButtonDelete', function() {
+    return {
+        restrict: 'A',
+        compile: function(element, attrs){
+            element.addClass("btn btn-danger btn-lg");
+            element.attr("type","submit");
+        }
+    }
+});
+
+module.directive('kcButtonReset', function ($compile, Notifications) {
+    return {
+        restrict: 'A',
+        link: function ($scope, elem, attr, ctrl) {
+            elem.addClass("btn btn-default btn-lg");
+            elem.attr("type","submit");
+            elem.bind('click', function() {
+                $scope.$apply(function() {
+                    var form = elem.closest('form');
+                    if (form && form.attr('name')) {
+                        form.find('.ng-valid').removeClass('error');
+                        form.find('.ng-invalid').removeClass('error');
+                        $scope['reset']();
+                    }
+                })
+            })
+        }
+    }
+});
+
+module.directive('kcButtonCancel', function ($compile, Notifications) {
+    return {
+        restrict: 'A',
+        replace: true,
+        compile: function(element, attrs){
+            element.addClass("btn btn-default btn-lg");
+            element.attr("type","submit");
+        }
+    }
 });
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html
index 59de7a6473..d511b5432f 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html
@@ -1,67 +1,60 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
-                    <li class="active">Credentials</li>
-                </ol>
-                <h2 data-ng-hide="create"><span>{{application.name}}</span> Credentials</h2>
-                <form name="credentialForm" novalidate >
-                    <fieldset data-ng-show="passwordRequired">
-                        <legend uncollapsed><span class="text">Change Password</span></legend>
-                        <div class="form-group">
-                            <label for="password">New Password</label>
-                            <div class="controls">
-                            <input type="password" id="password" name="password" data-ng-model="password" autofocus
-                                   required>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="two-lines" for="password">New Password Confirmation</label>
-                            <div class="controls">
-                                <input type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword"
-                                       required>
-                            </div>
-                        </div>
-                        <div class="form-actions">
-                            <button type="submit" data-ng-click="changePassword()" class="primary" ng-show="password != null">Save
-                            </button>
-                        </div>
-                    </fieldset>
-                    <fieldset data-ng-show="totpRequired">
-                        <legend uncollapsed><span class="text">Change TOTP Key</span></legend>
-                        <div class="form-group">
-                            <label for="totp">New Key</label>
-                            <div class="controls">
-                                <input type="text" id="totp" name="totp" data-ng-model="totp" autofocus
-                                       required>
-                                <button type="submit" data-ng-click="generateTotp()">Generate
-                                </button>
-                            </div>
-                        </div>
-                        <div class="form-actions">
-                            <label></label>
-                            <button type="submit" data-ng-click="changeTotp()" class="primary" ng-show="totp != null">Save
-                            </button>
-                        </div>
-                    </fieldset>
-                </form>
-            </div>
-        </div>
-        <div id="container-right-bg"></div>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
+    </ul>
+    <div id="content">
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
+            <li class="active">Credentials</li>
+        </ol>
+        <h2 data-ng-hide="create"><span>{{application.name}}</span> Credentials</h2>
+        <form class="form-horizontal" name="credentialForm" novalidate >
+            <fieldset data-ng-show="passwordRequired">
+                <legend uncollapsed><span class="text">Change Password</span></legend>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="password">New Password</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="password" id="password" name="password" data-ng-model="password" autofocus
+                               required>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="password">New Password Confirmation</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword"
+                               required>
+                    </div>
+                </div>
+                <div class="form-actions">
+                    <button type="submit" data-ng-click="changePassword()" class="btn btn-primary btn-lg" ng-show="password != null">Save
+                    </button>
+                </div>
+            </fieldset>
+            <fieldset data-ng-show="totpRequired">
+                <legend uncollapsed><span class="text">Change TOTP Key</span></legend>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="totp">New Key</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" id="totp" name="totp" data-ng-model="totp" autofocus
+                               required>
+                        <button class="btn btn-primary" type="submit" data-ng-click="generateTotp()">Generate
+                        </button>
+                    </div>
+                </div>
+                <div class="form-actions">
+                    <label class="col-sm-2 control-label"></label>
+                    <button type="submit" data-ng-click="changeTotp()" class="btn btn-primary btn-lg" ng-show="totp != null">Save
+                    </button>
+                </div>
+            </fieldset>
+        </form>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
index b8ea14464c..214f873a7b 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
@@ -1,118 +1,102 @@
-<div id="wrapper" class="container">
-    <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-show="!create">
-                <ul class="rcue-tabs">
-                    <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
-                </ul>
-            </div>
-            <div class="top-nav" data-ng-show="create">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-show="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li class="active">Add Application</li>
-                </ol>
-                <h2 class="pull-left" data-ng-show="create"><span>{{realm.realm}}</span> Add Application</h2>
-                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
-                    <li class="active">Settings</li>
-                </ol>
-                <h2 data-ng-hide="create"><span>{{application.name}}</span> Settings</h2>
-                <form name="applicationForm" novalidate>
-                    <fieldset class="border-top">
-                        <div class="form-group">
-                            <label for="name">Name <span class="required" data-ng-show="create">*</span></label>
-                            <div class="controls">
-                            <input type="text" id="name" name="name" data-ng-model="application.name" autofocus
-                                   required>
-                            </div>
-                        </div>
-
-                        <div class="form-group clearfix block">
-                            <label for="enabled" class="control-label">Enabled</label>
-                            <input ng-model="application.enabled" name="enabled" id="enabled" onoffswitch />
-                        </div>
-                        <div class="form-group">
-                            <label for="baseUrl" class="control-label">Base URL</label>
-
-                            <div class="controls">
-                                <input class="input-small" type="text" name="baseUrl" id="baseUrl"
-                                       data-ng-model="application.baseUrl">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="adminUrl" class="control-label">Admin URL</label>
-
-                            <div class="controls">
-                                <input class="input-small" type="text" name="adminUrl" id="adminUrl"
-                                       data-ng-model="application.adminUrl">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="newWebOrigin" class="control-label">Web Origin</label>
-                            <div class="controls">
-                                <div ng-repeat="webOrigin in application.webOrigins" class="item-deletable">
-                                    <input  class="input-small" type="text" data-ng-class="{'input-below':!$first}"
-                                            name="webOrigin" id="webOrigin" data-ng-model="webOrigin" readonly />
-                                    <button type="button" data-ng-click="deleteWebOrigin($index)" class="btn-delete">
-                                        Delete</button>
-                                </div>
-                                <input class="input-small" type="text" name="newWebOrigin" id="newWebOrigin"
-                                       placeholder="New Web Origin..." data-ng-model="newWebOrigin"
-                                       data-ng-class="{'input-below':application.webOrigins.length}" />
-                                <button data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="newRedirectUri" class="control-label">Redirect URI</label>
-                            <div class="controls">
-                                <div ng-repeat="redirectUri in application.redirectUris" class="item-deletable">
-                                    <input  class="input-small" type="text" data-ng-class="{'input-below':!$first}"
-                                            name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
-                                    <button type="button" data-ng-click="deleteRedirectUri($index)" class="btn-delete">
-                                        Delete</button>
-                                </div>
-                                <input class="input-small" type="text" name="newRedirectUri" id="newRedirectUri"
-                                       placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
-                                       data-ng-class="{'input-below':application.redirectUris.length}" />
-                                <button data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
-                            </div>
-                        </div>
-                    </fieldset>
-                    <div class="form-actions" data-ng-show="create">
-                        <button type="submit" kc-save data-ng-show="changed" class="primary">Save
-                        </button>
-                        <button type="submit" data-ng-click="cancel()">Cancel
-                        </button>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
+    </ul>
+    <div id="content">
+        <ol class="breadcrumb" data-ng-show="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li class="active">Add Application</li>
+        </ol>
+        <h2 data-ng-show="create"><span>{{realm.realm}}</span> Add Application</h2>
+        <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
+            <li class="active">Settings</li>
+        </ol>
+        <h2 data-ng-hide="create"><span>{{application.name}}</span> Settings</h2>
+        <form class="form-horizontal" name="applicationForm" novalidate>
+            <fieldset class="border-top">
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="name">Name <span class="required" data-ng-show="create">*</span></label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" id="name" name="name" data-ng-model="application.name" autofocus required>
                     </div>
+                </div>
 
-                    <div class="form-actions" data-ng-show="!create">
-                        <button type="submit" kc-save class="primary" data-ng-show="changed">Save
-                        </button>
-                        <button type="submit" kc-reset data-ng-show="changed">Clear changes
-                        </button>
-                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
-                            Delete
-                        </button>
+                <div class="form-group clearfix block">
+                    <label class="col-sm-2 control-label" for="enabled">Enabled</label>
+                    <div class="col-sm-4">
+                        <input ng-model="application.enabled" name="enabled" id="enabled" onoffswitch />
                     </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="baseUrl">Base URL</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" name="baseUrl" id="baseUrl"
+                               data-ng-model="application.baseUrl">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="adminUrl">Admin URL</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" name="adminUrl" id="adminUrl"
+                               data-ng-model="application.adminUrl">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="newWebOrigin">Web Origin</label>
+                    <div class="col-sm-4">
+                        <div ng-repeat="webOrigin in application.webOrigins" class="item-deletable">
+                            <input class="form-control kc-button-control"
+                                   type="text" data-ng-class="{'input-below':!$first}"
+                                   name="webOrigin" id="webOrigin"
+                                   data-ng-model="webOrigin" readonly/>
+                            <button class="btn btn-danger"
+                                    type="button" data-ng-click="deleteWebOrigin($index)">Delete</button>
+                        </div>
+                        <input class="form-control kc-button-control"
+                               type="text" name="newWebOrigin" id="newWebOrigin"
+                               placeholder="New Web Origin..." data-ng-model="newWebOrigin"
+                               data-ng-class="{'input-below':application.webOrigins.length}"/>
+                        <button class="btn btn-primary"
+                                data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="newRedirectUri">Redirect URI</label>
+                    <div class="col-sm-4">
+                        <div ng-repeat="redirectUri in application.redirectUris" class="item-deletable">
+                            <input class="form-control" type="text" data-ng-class="{'input-below':!$first}"
+                                   name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
+                            <button type="button" data-ng-click="deleteRedirectUri($index)" class="btn-delete">
+                                Delete</button>
+                        </div>
+                        <input class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
+                               placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
+                               data-ng-class="{'input-below':application.redirectUris.length}" />
+                        <button class="btn btn-primary" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
+                    </div>
+                </div>
+            </fieldset>
 
-                </form>
+            <div class="pull-right form-actions" data-ng-show="createRealm">
+                <button kc-cancel data-ng-click="cancel()">Cancel</button>
+                <button kc-save data-ng-show="changed">Save</button>
             </div>
-        </div>
-        <div id="container-right-bg"></div>
+            <div class="pull-right form-actions" data-ng-show="!createRealm">
+                <button kc-reset data-ng-show="changed">Clear changes</button>
+                <button kc-save  data-ng-show="changed">Save</button>
+                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
+            </div>
+        </form>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html
index 88064bb5bc..77d8dcd9c4 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html
@@ -1,27 +1,22 @@
-<div id="wrapper" class="container">
-    <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-show="!create">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
-                </ul>
-            </div>
-            <div class="top-nav" data-ng-show="create">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div id="content">
-                <a class="button primary" href="{{download}}" download="keycloak.json" type="submit">Download</a></br>
-                <textarea style="width: 100%;" rows="20" onclick="this.select()">{{installation | json}}</textarea>
-            </div>
-        </div>
-        <div id="container-right-bg"></div>
+<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">
+
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
+    </ul>
+
+    <div class="top-nav" data-ng-show="create">
+        <ul class="rcue-tabs">
+            <li></li>
+        </ul>
+    </div>
+    <div id="content">
+        <a class="button primary" href="{{download}}" download="keycloak.json" type="submit">Download</a></br>
+        <textarea style="width: 100%;" rows="20" onclick="this.select()">{{installation | json}}</textarea>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html
index 6c8b378bff..8a7a50988b 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html
@@ -1,71 +1,64 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li class="active">Applications</li>
-                </ol>
-                <h2><span>{{realm.realm}}</span> Applications</h2>
-                <div class="feedback info inline" data-ng-show="!applications || applications.length == 0">
-                    <p><strong>You have not configured applications.</strong> <a class="button" href="#/create/application/{{realm.realm}}">Add Application</a></p>
-                </div>
-                <table data-ng-hide="applications.length == 0">
-                    <thead>
-                    <tr>
-                        <th class="rcue-table-actions" colspan="3">
-                            <div class="search-comp clearfix">
-                                <input type="text" placeholder="Search..." class="search" data-ng-model="search.name"
-                                       onkeyup="if(event.keyCode == 13){$(this).next('button').click();}">
-                                <button class="icon-search" tooltip-placement="right"
-                                        tooltip="Search by application name.">
-                                    Icon: search
-                                </button>
-                            </div>
-                            <div class="actions">
-                                <a class="button" href="#/create/application/{{realm.realm}}">Add Application</a>
-                            </div>
-                        </th>
-                    </tr>
-                    <tr data-ng-show="applications.length > 0">
-                        <th>Application Name</th>
-                        <th>Enabled</th>
-                        <th>Base URL</th>
-                    </tr>
-                    </thead>
-                    <tfoot data-ng-show="applications && applications.length > 5"> <!-- todo -->
-                    <tr>
-                        <td colspan="3">
-                            <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>
-                    <tr ng-repeat="app in applications | filter:search">
-                        <td><a href="#/realms/{{realm.realm}}/applications/{{app.name}}">{{app.name}}</a></td>
-                        <td>{{app.enabled}}</td>
-                        <td ng-class="{'text-muted': !app.baseUrl}">
-                            <a href="{{app.baseUrl}}" data-ng-show="app.baseUrl">{{app.baseUrl}}</a>
-                            <span data-ng-hide="app.baseUrl">Not defined</span>
-                    </tr>
-                    </tbody>
-                </table>
-                <div class="feedback warning inline" data-ng-show="search && applications.length == 0">
-                    <p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
-                </div>
-            </div>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf">
+        <li class="active"><a href="">Application List</a></li>
+    </ul>
+    <div id="content">
+        <ol class="breadcrumb">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li class="active">Applications</li>
+        </ol>
+        <h2><span>{{realm.realm}}</span> Applications</h2>
+        <div class="feedback info inline" data-ng-show="!applications || applications.length == 0">
+            <p><strong>You have not configured applications.</strong> <a class="button" href="#/create/application/{{realm.realm}}">Add Application</a></p>
+        </div>
+        <table class="table" data-ng-hide="applications.length == 0">
+            <thead>
+            <tr>
+                <th class="kc-table-actions" colspan="3">
+                    <div class="search-comp clearfix">
+                        <input type="text" placeholder="Search..." class="form-control search" data-ng-model="search.name"
+                               onkeyup="if(event.keyCode == 13){$(this).next('button').click();}">
+                        <button type="submit" class="kc-icon-search" tooltip-placement="right"
+                                tooltip="Search by application name.">
+                            Icon: search
+                        </button>
+                    </div>
+                    <div class="pull-right">
+                        <a class="kc-button" href="#/create/application/{{realm.realm}}">Add Application</a>
+                    </div>
+                </th>
+            </tr>
+            <tr data-ng-show="applications.length > 0">
+                <th>Application Name</th>
+                <th>Enabled</th>
+                <th>Base URL</th>
+            </tr>
+            </thead>
+            <tfoot data-ng-show="applications && applications.length > 5"> <!-- todo -->
+            <tr>
+                <td colspan="3">
+                    <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>
+            <tr ng-repeat="app in applications | filter:search">
+                <td><a href="#/realms/{{realm.realm}}/applications/{{app.name}}">{{app.name}}</a></td>
+                <td>{{app.enabled}}</td>
+                <td ng-class="{'text-muted': !app.baseUrl}">
+                    <a href="{{app.baseUrl}}" data-ng-show="app.baseUrl">{{app.baseUrl}}</a>
+                    <span data-ng-hide="app.baseUrl">Not defined</span>
+            </tr>
+            </tbody>
+        </table>
+        <div class="feedback warning inline" data-ng-show="search && applications.length == 0">
+            <p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
         </div>
-        <div id="container-right-bg"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html
index e8bd13de7d..e9a7642fbd 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html
@@ -1,149 +1,144 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-show="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li class="active">Add role</li>
-                </ol>
-                <h2 class="pull-left" data-ng-show="create"><span>{{application.name}}</span> Add Role</h2>
-                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
-                
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li class="active">{{role.name}}</li>
-                </ol>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
+    </ul>
 
-                <h2 class="pull-left" data-ng-hide="create"><span>{{application.name}}</span> {{role.name}}</h2>
-                <form name="realmForm" novalidate>
-                    <fieldset class="border-top">
-                        <div class="form-group">
-                            <label for="name">Role name <span class="required" data-ng-show="create">*</span></label>
+    <div id="content">
+        <ol class="breadcrumb" data-ng-show="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+            <li class="active">Add role</li>
+        </ol>
+        <h2 class="pull-left" data-ng-show="create"><span>{{application.name}}</span> Add Role</h2>
+        <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
 
-                            <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>
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+            <li class="active">{{role.name}}</li>
+        </ol>
 
-                            <div class="controls">
-                                <textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description"></textarea>
-                            
-<!-- Replaced by the textarea above <input type="text" id="description" name="description" data-ng-model="role.description" autofocus
-                                       required> -->
-                            </div>
-                        </div>
-                        <div class="form-group clearfix block">
-                            <label for="compositeSwitch" class="control-label">Composite Roles</label>
-                            <input ng-model="compositeSwitch" name="compositeSwitch" id="compositeSwitch" ng-disabled="compositeSwitchDisabled" onoffswitch />
-                        </div>
-                    </fieldset>
-                    <div class="form-actions" data-ng-show="create">
-                        <button type="submit" kc-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>
+        <h2 data-ng-hide="create"><span>{{application.name}}</span> {{role.name}}</h2>
+        <form class="form-horizontal" name="realmForm" novalidate>
+            <fieldset class="border-top">
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="name">Role name <span class="required" data-ng-show="create">*</span></label>
+
+                    <div class="col-sm-4">
+                        <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 class="col-sm-2 control-label" for="description">Description </label>
 
-                    <div class="form-actions" data-ng-show="!create">
-                        <button type="submit" kc-save class="primary" data-ng-show="changed">Save
-                        </button>
-                        <button type="submit" kc-reset data-ng-show="changed">Clear changes
-                        </button>
-                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
-                            Delete
-                        </button>
+                    <div class="col-sm-4">
+                        <textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description"></textarea>
+                        <!-- Replaced by the textarea above <input type="text" id="description" name="description" data-ng-model="role.description" autofocus
+                                                               required> -->
                     </div>
-                    <fieldset data-ng-show="!create && (compositeSwitch || role.composite)">
-                        <legend collapsed><span class="text">Composite Realm Roles</span> </legend>
-                        <div class="form-group">
-                            <div class="controls changing-selectors">
-                                <div class="select-title">
-                                    <label for="available">Available Roles</label>
-                                    <select id="available" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmRoles"
-                                            ng-options="r.name for r in realmRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned">Assigned Roles</label>
-                                    <select id="assigned" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmMappings"
-                                            ng-options="r.name for r in realmMappings">
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </fieldset>
+                </div>
+                <div class="form-group clearfix block">
+                    <label class="col-sm-2 control-label" for="compositeSwitch" class="control-label">Composite Roles</label>
+                    <div class="col-sm-4">
+                        <input ng-model="compositeSwitch" name="compositeSwitch" id="compositeSwitch" ng-disabled="compositeSwitchDisabled" onoffswitch />
+                    </div>
+                </div>
+            </fieldset>
 
-                    <fieldset ng-show="applications.length > 0 && !create && (compositeSwitch || role.composite)">
-                        <legend collapsed><span class="text">Composite Application Roles</span> </legend>
-                        <div class="form-group input-select">
-                            <label for="applications">Application</label>
-                            <div class="input-group">
-                                <div class="select-kc">
-                                    <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
-                                        <option value="" selected> Select an Application...</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form-group" ng-show="compositeApp">
-                            <div class="controls changing-selectors application">
-                                <div class="select-title">
-                                    <label for="available-app">Available Roles</label>
-                                    <select id="available-app" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationRoles"
-                                            ng-options="r.name for r in applicationRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned-app">Assigned Roles</label>
-                                    <select id="assigned-app" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationMappings"
-                                            ng-options="r.name for r in applicationMappings">
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </fieldset>
-
-
-                </form>
+            <div class="pull-right form-actions" data-ng-show="create">
+                <button kc-cancel data-ng-click="cancel()">Cancel</button>
+                <button kc-save data-ng-show="changed">Save</button>
             </div>
-        </div>
-        <div id="container-right-bg"></div>
+            <div class="pull-right form-actions" data-ng-show="!create">
+                <button kc-reset data-ng-show="changed">Clear changes</button>
+                <button kc-save  data-ng-show="changed">Save</button>
+                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
+            </div>
+
+            <fieldset data-ng-show="!create && (compositeSwitch || role.composite)">
+                <legend collapsed><span class="text">Composite Realm Roles</span> </legend>
+                <div class="form-group">
+                    <div class="controls changing-selectors">
+                        <div class="select-title">
+                            <label class="control-label" for="available">Available Roles</label>
+                            <select id="available" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmRoles"
+                                    ng-options="r.name for r in realmRoles">
+                            </select>
+                        </div>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
+                        </div>
+                        <div class="select-title">
+                            <label class="control-label" for="assigned">Assigned Roles</label>
+                            <select id="assigned" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmMappings"
+                                    ng-options="r.name for r in realmMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+
+            <fieldset ng-show="applications.length > 0 && !create && (compositeSwitch || role.composite)">
+                <legend collapsed><span class="text">Composite Application Roles</span> </legend>
+                <div class="form-group input-select">
+                    <label class="control-label" for="applications">Application</label>
+                    <div class="input-group">
+                        <div class="select-kc">
+                            <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
+                                <option value="" selected> Select an Application...</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" ng-show="compositeApp">
+                    <div class="controls changing-selectors application">
+                        <div class="select-title">
+                            <label class="control-label" for="available-app">Available Roles</label>
+                            <select id="available-app" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationRoles"
+                                    ng-options="r.name for r in applicationRoles">
+                            </select>
+                        </div>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
+                        </div>
+                        <div class="select-title">
+                            <label class="control-label" for="assigned-app">Assigned Roles</label>
+                            <select id="assigned-app" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationMappings"
+                                    ng-options="r.name for r in applicationMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-list.html
index 1e09376d70..634f5b8b6a 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-list.html
@@ -1,78 +1,73 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
-                    <li class="active">Roles</li>
-                </ol>
-                <h2><span>{{application.name}}</span> Roles</h2>
-                <div class="feedback info inline" data-ng-show="!roles || roles.length == 0">
-                    <p><strong>You have not configured application roles.</strong> <a class="button" href="#/create/role/{{realm.realm}}/applications/{{application.name}}">Add Role</a></p>
-                </div>
-                <table data-ng-hide="!roles || roles.length == 0">
-                    <caption data-ng-show="roles && roles.length > 0" class="hidden">Table of realm roles</caption>
-                    <thead>
-                        <tr>
-                            <th class="rcue-table-actions" colspan="3">
-                                <div class="actions">
-                                    <a class="button" href="#/create/role/{{realm.realm}}/applications/{{application.name}}">Add Role</a>
-                                    <!-- <button class="remove disabled">Remove</button> -->
-                                </div>
-                            </th>
-                        </tr>
-                        <tr data-ng-show="roles && roles.length > 5">
-                            <th class="rcue-table-actions" colspan="3">
-                                <div class="search-comp clearfix">
-                                    <input type="text" placeholder="Search..." class="search">
-                                    <button class="icon-search" tooltip-placement="right"
-                                            tooltip="Search by role name.">
-                                        Icon: search
-                                    </button>
-                                </div>
-                            </th>
-                        </tr>
-                        <tr>
-                            <th>Role Name</th>
-                            <th>Composite</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tfoot data-ng-show="roles && roles.length > 5"> <!-- todo -->
-                    <tr>
-                        <td colspan="3">
-                            <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>
-                    <tr ng-repeat="role in roles">
-                        <td><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles/{{role.name}}">{{role.name}}</a></td>
-                        <td>{{role.composite}}</td>
-                        <td>{{role.description}}</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
+<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">
+
+    <ul class="nav nav-tabs nav-tabs-pf">
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
+    </ul>
+
+    <div id="content">
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
+            <li class="active">Roles</li>
+        </ol>
+        <h2><span>{{application.name}}</span> Roles</h2>
+        <div class="feedback info inline" data-ng-show="!roles || roles.length == 0">
+            <p><strong>You have not configured application roles.</strong> <a class="button" href="#/create/role/{{realm.realm}}/applications/{{application.name}}">Add Role</a></p>
         </div>
-        <div id="container-right-bg"></div>
+        <table class="table" data-ng-hide="!roles || roles.length == 0">
+            <caption data-ng-show="roles && roles.length > 0" class="hidden">Table of realm roles</caption>
+            <thead>
+            <tr>
+                <th class="kc-table-actions" colspan="3">
+                    <div class="pull-right">
+                        <a class="kc-button" href="#/create/role/{{realm.realm}}/applications/{{application.name}}">Add Role</a>
+                        <!-- <button class="remove disabled">Remove</button> -->
+                    </div>
+                </th>
+            </tr>
+            <tr data-ng-show="roles && roles.length > 5">
+                <th class="kc-table-actions" colspan="3">
+                    <div class="search-comp clearfix">
+                        <input type="text" placeholder="Search..." class="search">
+                        <button class="icon-search" tooltip-placement="right"
+                                tooltip="Search by role name.">
+                            Icon: search
+                        </button>
+                    </div>
+                </th>
+            </tr>
+            <tr>
+                <th>Role Name</th>
+                <th>Composite</th>
+                <th>Description</th>
+            </tr>
+            </thead>
+            <tfoot data-ng-show="roles && roles.length > 5"> <!-- todo -->
+            <tr>
+                <td colspan="3">
+                    <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>
+            <tr ng-repeat="role in roles">
+                <td><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles/{{role.name}}">{{role.name}}</a></td>
+                <td>{{role.composite}}</td>
+                <td>{{role.description}}</td>
+            </tr>
+            </tbody>
+        </table>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html
index 827a02843d..d70359e4d9 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html
@@ -1,95 +1,98 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
-                    <li><a href="#">Installation</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
-                    <li class="active">Scope</li>
-                </ol>
-                <h2 class="pull-left"><span>{{application.name}}</span> Scope Mappings</h2>
-                <p class="subtitle"></p>
-                <form name="realmForm" novalidate>
-                    <fieldset>
-                        <legend uncollapsed><span class="text">Realm Roles</span></legend>
-                        <div class="form-group">
-                            <div class="controls changing-selectors">
-                                <div class="select-title">
-                                    <label for="available">Available Roles</label>
-                                    <select id="available" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmRoles"
-                                            ng-options="r.name for r in realmRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned">Assigned Roles</label>
-                                    <select id="assigned" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmMappings"
-                                            ng-options="r.name for r in realmMappings">
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </fieldset>
+<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">
 
-                    <fieldset ng-show="applications.length > 0">
-                        <legend collapsed><span class="text">Application Roles</span> </legend>
-                        <div class="form-group input-select">
-                            <label for="applications">Application</label>
-                            <div class="input-group">
-                                <div class="select-kc">
-                                    <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications|remove:application:'id')">
-                                        <option value="" selected> Select an Application </option>
-                                    </select>
-                                </div>
-                            </div>
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
+        <li><a href="#">Installation</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
+    </ul>
+
+    <div id="content">
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
+            <li class="active">Scope</li>
+        </ol>
+        <h2><span>{{application.name}}</span> Scope Mappings</h2>
+        <p class="subtitle"></p>
+        <form class="form-horizontal" name="realmForm" novalidate>
+            <fieldset>
+                <legend uncollapsed><span class="text">Realm Roles</span></legend>
+                <div class="form-group">
+                    <div class="controls changing-selectors">
+                        <div class="select-title">
+                            <label for="available">Available Roles</label>
+                            <select id="available" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmRoles"
+                                    ng-options="r.name for r in realmRoles">
+                            </select>
                         </div>
-                        <div class="form-group" ng-show="targetApp">
-                            <div class="controls changing-selectors application">
-                                <div class="select-title">
-                                    <label for="app-available">Available Roles</label>
-                                    <select id="app-available" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationRoles"
-                                            ng-options="r.name for r in applicationRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="app-assigned">Assigned Roles</label>
-                                    <select id="app-assigned" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationMappings"
-                                            ng-options="r.name for r in applicationMappings">
-                                    </select>
-                                </div>
-                            </div>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
                         </div>
-                    </fieldset>
-                </form>
-            </div>
-        </div>
-        <div id="container-right-bg"></div>
+                        <div class="select-title">
+                            <label for="assigned">Assigned Roles</label>
+                            <select id="assigned" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmMappings"
+                                    ng-options="r.name for r in realmMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+
+            <fieldset ng-show="applications.length > 0">
+                <legend collapsed><span class="text">Application Roles</span> </legend>
+                <div class="form-group input-select">
+                    <label for="applications">Application</label>
+                    <div class="input-group">
+                        <div class="select-kc">
+                            <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications|remove:application:'id')">
+                                <option value="" selected> Select an Application </option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" ng-show="targetApp">
+                    <div class="controls changing-selectors application">
+                        <div class="select-title">
+                            <label for="app-available">Available Roles</label>
+                            <select id="app-available" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationRoles"
+                                    ng-options="r.name for r in applicationRoles">
+                            </select>
+                        </div>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
+                        </div>
+                        <div class="select-title">
+                            <label for="app-assigned">Assigned Roles</label>
+                            <select id="app-assigned" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationMappings"
+                                    ng-options="r.name for r in applicationMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-sessions.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-sessions.html
index b00d13c0e9..5f110beb7f 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-sessions.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-sessions.html
@@ -1,27 +1,22 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
-                    <li class="active">Sessions</li>
-                </ol>
-                <h2 data-ng-hide="create"><span>{{application.name}}</span> Sessions (Placeholder Page)</h2>
-            </div>
-        </div>
-        <div id="container-right-bg"></div>
+<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">
+
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/installation">Installation</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/roles">Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/scope-mappings">Scope</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/applications/{{application.name}}/sessions">Sessions</a></li>
+    </ul>
+
+    <div id="content">
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications">Applications</a></li>
+            <li><a href="#/realms/{{realm.realm}}/applications/{{application.name}}">{{application.name}}</a></li>
+            <li class="active">Sessions</li>
+        </ol>
+        <h2 data-ng-hide="create"><span>{{application.name}}</span> Sessions (Placeholder Page)</h2>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html
index 8676a8c8a4..8c2f0bb1ae 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html
@@ -1,61 +1,60 @@
-<div class="row">
-    <div class="bs-sidebar col-sm-3 " data-ng-include data-src="'partials/realm-menu.html'"></div>
-    <div id="content-area" class="col-sm-9" role="main">
-        <ul class="nav nav-tabs nav-tabs-pf">
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
-                </ul>
+<div class="bs-sidebar col-sm-3" data-ng-include data-src="'partials/realm-menu.html'"></div>
+<div id="content-area" class="col-sm-9" role="main">
+    <ul class="nav nav-tabs nav-tabs-pf">
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
+    </ul>
 
-            <div id="content">
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">{{oauth.name}}</a></li>
-                    <li class="active">Credentials</li>
-                </ol>
-                <h2 data-ng-hide="create"><span>{{oauth.name}}</span> Credentials</h2>
-                <form name="credentialForm" novalidate >
-                    <fieldset data-ng-show="passwordRequired">
-                        <legend uncollapsed><span class="text">Change Password</span></legend>
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label" for="password">New Password</label>
-                            <div class="col-sm-4">
-                                <input class="form-control" type="password" id="password" name="password" data-ng-model="password" autofocus
-                                   required>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label two-lines" for="password">New Password Confirmation</label>
-                            <div class="col-sm-4">
-                                <input class="form-control" type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword"
-                                       required>
-                            </div>
-                        </div>
-                        <div class="form-actions">
-                            <button type="submit" data-ng-click="changePassword()" class="primary" ng-show="password != null">Save
-                            </button>
-                        </div>
-                    </fieldset>
-                    <fieldset data-ng-show="totpRequired">
-                        <legend uncollapsed><span class="text">Change TOTP Key</span></legend>
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label" for="totp">New Key</label>
-                            <div class="col-sm-4">
-                                <input class="form-control" type="text" id="totp" name="totp" data-ng-model="totp" autofocus
-                                       required>
-                                <button type="submit" data-ng-click="generateTotp()">Generate
-                                </button>
-                            </div>
-                        </div>
-                        <div class="pull-right form-actions">
-                            <label></label>
-                            <button type="submit" data-ng-click="changeTotp()" class="primary" ng-show="totp != null">Save
-                            </button>
-                        </div>
-                    </fieldset>
-                </form>
-            </div>
+    <div id="content">
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
+            <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">{{oauth.name}}</a></li>
+            <li class="active">Credentials</li>
+        </ol>
+        <h2 data-ng-hide="create"><span>{{oauth.name}}</span> Credentials</h2>
+        <form class="form-horizontal" name="credentialForm" novalidate>
+            <fieldset data-ng-show="passwordRequired">
+                <legend uncollapsed><span class="text">Change Password</span></legend>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="password">New Password</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="password" id="password" name="password" data-ng-model="password" autofocus
+                               required>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label two-lines" for="password">New Password Confirmation</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword"
+                               required>
+                    </div>
+                </div>
+                <div class="form-actions">
+                    <button class="btn btn-primary btn-lg" type="submit" data-ng-click="changePassword()" ng-show="password != null">Save
+                    </button>
+                </div>
+            </fieldset>
+            <fieldset data-ng-show="totpRequired">
+                <legend uncollapsed><span class="text">Change TOTP Key</span></legend>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="totp">New Key</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" id="totp" name="totp" data-ng-model="totp" autofocus
+                               required>
+                        <button class="btn btn-primary"  type="submit" data-ng-click="generateTotp()">Generate
+                        </button>
+                    </div>
+                </div>
+                <div class="pull-right form-actions">
+                    <label></label>
+                    <button class="btn btn-primary btn-lg" type="submit" data-ng-click="changeTotp()" ng-show="totp != null">Save
+                    </button>
+                </div>
+            </fieldset>
+        </form>
     </div>
 </div>
+
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html
index 528bf6e962..838df6613c 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html
@@ -1,100 +1,84 @@
-<div id="wrapper" class="container">
-    <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-show="!create">
-                <ul class="rcue-tabs">
-                    <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
-                </ul>
-            </div>
-            <div class="top-nav" data-ng-show="create">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-show="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
-                    <li class="active">Add OAuth Client</li>
-                </ol>
-                <h2 class="pull-left" data-ng-show="create"><span>{{realm.realm}}</span> Add OAuth Client</h2>
-                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">{{oauth.name}}</a></li>
-                    <li class="active">Settings</li>
-                </ol>
-                <h2 data-ng-hide="create"><span>{{oauth.name}}</span> Settings</h2>
-                <form name="oauthForm" novalidate>
-                    <fieldset class="border-top">
-                        <div class="form-group">
-                            <label for="name">Name <span class="required" data-ng-show="create">*</span></label>
-                            <div class="controls">
-                            <input type="text" id="name" name="name" data-ng-model="oauth.name" autofocus
-                                   required>
-                            </div>
-                        </div>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf" data-ng-show="!create">
+        <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
+    </ul>
+    <div id="content">
+        <ol class="breadcrumb" data-ng-show="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
+            <li class="active">Add OAuth Client</li>
+        </ol>
+        <h2 data-ng-show="create"><span>{{realm.realm}}</span> Add OAuth Client</h2>
+        <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
+            <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">{{oauth.name}}</a></li>
+            <li class="active">Settings</li>
+        </ol>
+        <h2 data-ng-hide="create"><span>{{oauth.name}}</span> Settings</h2>
+        <form class="form-horizontal" name="oauthForm" novalidate>
+            <fieldset class="border-top">
 
-                        <div class="form-group clearfix block">
-                            <label for="enabled" class="control-label">Enabled</label>
-                            <input ng-model="oauth.enabled" name="enabled" id="enabled" onoffswitch />
-                        </div>
-                        <div class="form-group">
-                            <label for="newWebOrigin" class="control-label">Web Origin</label>
-                            <div class="controls">
-                                <div ng-repeat="webOrigin in oauth.webOrigins" class="item-deletable">
-                                    <input  class="input-small" type="text" data-ng-class="{'input-below':!$first}"
-                                            name="webOrigin" id="webOrigin" data-ng-model="webOrigin" readonly />
-                                    <button type="button" data-ng-click="deleteWebOrigin($index)" class="btn-delete">
-                                        Delete</button>
-                                </div>
-                                <input class="input-small" type="text" name="newWebOrigin" id="newWebOrigin"
-                                       placeholder="New Web Origin..." data-ng-model="newWebOrigin"
-                                       data-ng-class="{'input-below':oauth.webOrigins.length}" />
-                                <button data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="newRedirectUri" class="control-label">Redirect URI</label>
-                            <div class="controls">
-                                <div ng-repeat="redirectUri in oauth.redirectUris" class="item-deletable">
-                                    <input  class="input-small" type="text" data-ng-class="{'input-below':!$first}"
-                                            name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
-                                    <button type="button" data-ng-click="deleteRedirectUri($index)" class="btn-delete">
-                                        Delete</button>
-                                </div>
-                                <input class="input-small" type="text" name="newRedirectUri" id="newRedirectUri"
-                                       placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
-                                       data-ng-class="{'input-below':oauth.redirectUris.length}" />
-                                <button data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
-                            </div>
-                        </div>
-                    </fieldset>
-                    <div class="form-actions" data-ng-show="create">
-                        <button type="submit" kc-save data-ng-show="changed" class="primary">Save
-                        </button>
-                        <button type="submit" data-ng-click="cancel()">Cancel
-                        </button>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="name">Name <span class="required" data-ng-show="create">*</span></label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" id="name" name="name" data-ng-model="oauth.name" autofocus
+                               required>
                     </div>
+                </div>
 
-                    <div class="form-actions" data-ng-show="!create">
-                        <button type="submit" kc-save class="primary" data-ng-show="changed">Save
-                        </button>
-                        <button type="submit" kc-reset data-ng-show="changed">Clear changes
-                        </button>
-                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
-                            Delete
-                        </button>
+                <div class="form-group clearfix block">
+                    <label class="col-sm-2 control-label" for="enabled">Enabled</label>
+                    <div class="col-sm-4">
+                    <input ng-model="oauth.enabled" name="enabled" id="enabled" onoffswitch />
+                        </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="newWebOrigin">Web Origin</label>
+                    <div class="col-sm-4">
+                        <div ng-repeat="webOrigin in oauth.webOrigins" class="item-deletable">
+                            <input  class="form-control" type="text" data-ng-class="{'input-below':!$first}"
+                                    name="webOrigin" id="webOrigin" data-ng-model="webOrigin" readonly />
+                            <button class="btn btn-danger" type="button" data-ng-click="deleteWebOrigin($index)">
+                                Delete</button>
+                        </div>
+                        <input  class="form-control" type="text" name="newWebOrigin" id="newWebOrigin"
+                               placeholder="New Web Origin..." data-ng-model="newWebOrigin"
+                               data-ng-class="{'input-below':oauth.webOrigins.length}" />
+                        <button  class="btn btn-primary" data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
                     </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="newRedirectUri">Redirect URI</label>
+                    <div class="col-sm-4">
+                        <div ng-repeat="redirectUri in oauth.redirectUris" class="item-deletable">
+                            <input  class="form-control" type="text" data-ng-class="{'input-below':!$first}"
+                                    name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
+                            <button class="btn btn-danger" type="button" data-ng-click="deleteRedirectUri($index)">
+                                Delete</button>
+                        </div>
+                        <input  class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
+                               placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
+                               data-ng-class="{'input-below':oauth.redirectUris.length}" />
+                        <button class="btn btn-primary" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
+                    </div>
+                </div>
+            </fieldset>
 
-                </form>
+            <div class="pull-right form-actions" data-ng-show="create">
+                <button kc-cancel data-ng-click="cancel()">Cancel</button>
+                <button kc-save data-ng-show="changed">Save</button>
             </div>
-        </div>
-        <div id="container-right-bg"></div>
+            <div class="pull-right form-actions" data-ng-show="!create">
+                <button kc-reset data-ng-show="changed">Clear changes</button>
+                <button kc-save  data-ng-show="changed">Save</button>
+                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
+            </div>
+        </form>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html
index 07a0c80509..d7de9eaacc 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html
@@ -1,25 +1,13 @@
-<div id="wrapper" class="container">
-    <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-show="!create">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
-                </ul>
-            </div>
-            <div class="top-nav" data-ng-show="create">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div id="content">
-                <a class="button primary" href="{{download}}" download="keycloak.json" type="submit">Download</a></br>
-                <textarea style="width: 100%;" rows="20" onclick="this.select()">{{installation | json}}</textarea>
-            </div>
-        </div>
-        <div id="container-right-bg"></div>
+<div class="bs-sidebar col-sm-3" data-ng-include data-src="'partials/realm-menu.html'"></div>
+<div id="content-area" class="col-md-9" role="main">
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
+    </ul>
+    <div id="content">
+        <textarea style="width: 100%;" rows="20" onclick="this.select()">{{installation | json}}</textarea>
+        <a class="kc-button primary" href="{{download}}" download="keycloak.json" type="submit">Download</a>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html
index 6613d1bb24..84387a290a 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html
@@ -1,67 +1,60 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li class="active">OAuth Clients</li>
-                </ol>
-                <h2><span>{{realm.realm}}</span> OAuth Clients</h2>
-                <div class="feedback info inline" data-ng-show="!oauthClients || oauthClients.length == 0">
-                    <p><strong>You have not configured oauth clients.</strong> <a class="button" href="#/create/oauth-client/{{realm.realm}}">Add OAuth Client</a></p>
-                </div>
-                <table data-ng-hide="oauthClients.length == 0">
-                    <thead>
-                    <tr>
-                        <th class="rcue-table-actions" colspan="3">
-                            <div class="search-comp clearfix">
-                                <input type="text" placeholder="Search..." class="search"
-                                       onkeyup="if(event.keyCode == 13){$(this).next('button').click();}">
-                                <button class="icon-search" tooltip-placement="right"
-                                        tooltip="Search by oauth client name">
-                                    Icon: search
-                                </button>
-                            </div>
-                            <div class="actions">
-                                <a class="button" href="#/create/oauth-client/{{realm.realm}}">Add OAuth Client</a>
-                            </div>
-                        </th>
-                    </tr>
-                    <tr data-ng-show="oauthClients.length > 0">
-                        <th>OAuth Client Name</th>
-                        <th>Enabled</th>
-                    </tr>
-                    </thead>
-                    <tfoot data-ng-show="oauthClients && oauthClients.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>
-                    <tr ng-repeat="client in oauthClients">
-                        <td><a href="#/realms/{{realm.realm}}/oauth-clients/{{client.id}}">{{client.name}}</a></td>
-                        <td>{{client.enabled}}</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <div class="feedback warning inline" data-ng-show="search && oauthClients.length == 0">
-                    <p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
-                </div>
-            </div>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf">
+        <li class="active"><a href="">OAuth List</a></li>
+    </ul>
+    <div id="content">
+        <ol class="breadcrumb">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li class="active">OAuth Clients</li>
+        </ol>
+        <h2><span>{{realm.realm}}</span> OAuth Clients</h2>
+        <div class="feedback info inline" data-ng-show="!oauthClients || oauthClients.length == 0">
+            <p><strong>You have not configured oauth clients.</strong> <a class="button" href="#/create/oauth-client/{{realm.realm}}">Add OAuth Client</a></p>
+        </div>
+        <table class="table" data-ng-hide="oauthClients.length == 0">
+            <thead>
+            <tr>
+                <th class="kc-table-actions" colspan="3">
+                    <div class="search-comp clearfix">
+                        <input type="text" placeholder="Search..." class="form-control search"
+                               onkeyup="if(event.keyCode == 13){$(this).next('button').click();}">
+                        <button class="kc-icon-search" tooltip-placement="right"
+                                tooltip="Search by oauth client name">
+                            Icon: search
+                        </button>
+                    </div>
+                    <div class="pull-right">
+                        <a class="kc-button" href="#/create/oauth-client/{{realm.realm}}">Add OAuth Client</a>
+                    </div>
+                </th>
+            </tr>
+            <tr data-ng-show="oauthClients.length > 0">
+                <th>OAuth Client Name</th>
+                <th>Enabled</th>
+            </tr>
+            </thead>
+            <tfoot data-ng-show="oauthClients && oauthClients.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>
+            <tr ng-repeat="client in oauthClients">
+                <td><a href="#/realms/{{realm.realm}}/oauth-clients/{{client.id}}">{{client.name}}</a></td>
+                <td>{{client.enabled}}</td>
+            </tr>
+            </tbody>
+        </table>
+        <div class="feedback warning inline" data-ng-show="search && oauthClients.length == 0">
+            <p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
         </div>
-        <div id="container-right-bg"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html
index 86012bc165..74c5787763 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html
@@ -1,93 +1,88 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">{{oauth.name}}</a></li>
-                    <li class="active">Scope</li>
-                </ol>
-                <h2 class="pull-left"><span>{{oauth.name}}</span> Scope Mappings</h2>
-                <p class="subtitle"></p>
-                <form name="realmForm" novalidate>
-                    <fieldset>
-                        <legend uncollapsed><span class="text">Realm Roles</span></legend>
-                        <div class="form-group">
-                            <div class="controls changing-selectors">
-                                <div class="select-title">
-                                    <label for="available">Available Roles</label>
-                                    <select id="available" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmRoles"
-                                            ng-options="r.name for r in realmRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned">Assigned Roles</label>
-                                    <select id="assigned" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmMappings"
-                                            ng-options="r.name for r in realmMappings">
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </fieldset>
+<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">
 
-                    <fieldset ng-show="applications.length > 0">
-                        <legend collapsed><span class="text">Application Roles</span> </legend>
-                        <div class="form-group input-select">
-                            <label for="applications">Application</label>
-                            <div class="input-group">
-                                <div class="select-kc">
-                                    <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications)">
-                                        <option value="" selected> Select an Application </option>
-                                    </select>
-                                </div>
-                            </div>
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">Settings</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/credentials">Credentials</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/scope-mappings">Scope</a></li>
+        <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
+    </ul>
+
+    <div id="content">
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/oauth-clients">OAuth Clients</a></li>
+            <li><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}">{{oauth.name}}</a></li>
+            <li class="active">Scope</li>
+        </ol>
+        <h2><span>{{oauth.name}}</span> Scope Mappings</h2>
+        <p class="subtitle"></p>
+        <form class="form-horizontal" name="realmForm" novalidate>
+            <fieldset>
+                <legend uncollapsed><span class="text">Realm Roles</span></legend>
+                <div class="form-group">
+                    <div class="controls changing-selectors">
+                        <div class="select-title">
+                            <label class="control-label" for="available">Available Roles</label>
+                            <select id="available" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmRoles"
+                                    ng-options="r.name for r in realmRoles">
+                            </select>
                         </div>
-                        <div class="form-group" ng-show="targetApp">
-                            <div class="controls changing-selectors application">
-                                <div class="select-title">
-                                    <label for="app-available">Available Roles</label>
-                                    <select id="app-available" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationRoles"
-                                            ng-options="r.name for r in applicationRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="app-assigned">Assigned Roles</label>
-                                    <select id="app-assigned" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationMappings"
-                                            ng-options="r.name for r in applicationMappings">
-                                    </select>
-                                </div>
-                            </div>
+                        <div class="middle-buttons">
+                            <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="kc-icon-arrow-right">Move right</span></button>
+                            <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="kc-icon-arrow-left">Move left</span></button>
                         </div>
-                    </fieldset>
-                </form>
-            </div>
-        </div>
-        <div id="container-right-bg"></div>
+                        <div class="select-title">
+                            <label class="control-label" for="assigned">Assigned Roles</label>
+                            <select id="assigned" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmMappings"
+                                    ng-options="r.name for r in realmMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+
+            <fieldset ng-show="applications.length > 0">
+                <legend collapsed><span class="text">Application Roles</span> </legend>
+                <div class="form-group input-select">
+                    <label class="control-label" for="applications">Application</label>
+                    <div class="input-group">
+                        <div class="select-kc">
+                            <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications)">
+                                <option value="" selected> Select an Application </option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" ng-show="targetApp">
+                    <div class="controls changing-selectors application">
+                        <div class="select-title">
+                            <label class="control-label" for="app-available">Available Roles</label>
+                            <select id="app-available" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationRoles"
+                                    ng-options="r.name for r in applicationRoles">
+                            </select>
+                        </div>
+                        <div class="middle-buttons">
+                            <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
+                            <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
+                        </div>
+                        <div class="select-title">
+                            <label class="control-label" for="app-assigned">Assigned Roles</label>
+                            <select id="app-assigned" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationMappings"
+                                    ng-options="r.name for r in applicationMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html
index 2ca0ea8477..a5d56b38b1 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html
@@ -41,8 +41,8 @@
                         <caption class="hidden">Table of Password Policies</caption>
                         <thead>
                         <tr ng-show="(allPolicies|remove:policy:'name').length > 0">
-                            <th colspan="5" class="rcue-table-actions">
-                                <div class="actions">
+                            <th colspan="5" class="kc-table-actions">
+                                <div class="pull-right">
                                     <div class="select-kc">
                                         <select ng-model="selectedPolicy"
                                                 ng-options="(p.name|capitalize) for p in (allPolicies|remove:policy:'name')"
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html
index e771edb9c7..d3167a2ec2 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html
@@ -22,10 +22,10 @@
                             </select>
                         </div>
                         <div class="middle-buttons">
-                            <button class="kc-button" type="submit" ng-click="addRealmDefaultRole()" tooltip="Move right" tooltip-placement="right">
+                            <button class="kc-button kc-vertical" type="submit" ng-click="addRealmDefaultRole()" tooltip="Move right" tooltip-placement="right">
                                 <span class="kc-icon-arrow-right"><span>Move right</span></span>
                             </button>
-                            <button class="kc-button" type="submit" ng-click="deleteRealmDefaultRole()" tooltip="Move left" tooltip-placement="right">
+                            <button class="kc-button kc-vertical" type="submit" ng-click="deleteRealmDefaultRole()" tooltip="Move left" tooltip-placement="right">
                                 <span class="kc-icon-arrow-left"><span>Move left</span></span>
                             </button>
                         </div>
@@ -64,10 +64,10 @@
                             </select>
                         </div>
                         <div class="middle-buttons">
-                            <button class="kc-button" type="submit" ng-click="addAppDefaultRole()" tooltip="Move right" tooltip-placement="right">
+                            <button class="kc-button kc-vertical" type="submit" ng-click="addAppDefaultRole()" tooltip="Move right" tooltip-placement="right">
                                 <span class="kc-icon-arrow-right"><span>Move right</span></span>
                             </button>
-                            <button class="kc-button" type="submit" ng-click="rmAppDefaultRole()" tooltip="Move left" tooltip-placement="right">
+                            <button class="kc-button kc-vertical" type="submit" ng-click="rmAppDefaultRole()" tooltip="Move left" tooltip-placement="right">
                                 <span class="kc-icon-arrow-left"><span>Move left</span></span>
                             </button>
                         </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
index c776eca7d8..476049de4e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
@@ -10,6 +10,7 @@
         <h2 class="pull-left" data-ng-show="createRealm">Add Realm</h2>
         <h2 data-ng-hide="createRealm"><span>{{realm.realm}}</span> General Settings</h2>
         <p class="subtitle" data-ng-show="createRealm"><span class="required">*</span> Required fields</p>
+        <kc-test></kc-test>
         <form class="form-horizontal" name="realmForm" novalidate>
             <fieldset>
                 <legend uncollapsed class="aj-collapse open"><span class="text">Required Settings</span></legend>
@@ -21,7 +22,7 @@
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="col-sm-2 control-label control-label" for="enabled">Enabled</label>
+                    <label class="col-sm-2 control-label" for="enabled">Enabled</label>
                     <div class="col-sm-4">
                         <input ng-model="realm.enabled" name="enabled" id="enabled" onoffswitch />
                     </div>
@@ -30,7 +31,7 @@
             <fieldset>
                 <legend uncollapsed><span class="text">Login Options</span></legend>
                 <div class="form-group">
-                    <label for="social" class="col-sm-2 control-label">Social login</label>
+                    <label class="col-sm-2 control-label" for="social">Social login</label>
                     <div class="col-sm-4">
                         <input ng-model="realm.social" name="social" id="social" onoffswitch />
                     </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html
index edf92a3ed2..7ed860526a 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-social.html
@@ -20,8 +20,8 @@
                         <caption class="hidden">Table of social providers</caption>
                         <thead>
                         <tr>
-                            <th colspan="5" class="rcue-table-actions">
-                                <div class="actions">
+                            <th colspan="5" class="kc-table-actions">
+                                <div class="pull-right">
                                     <div class="select-kc">
                                         <select ng-model="newProviderId"
                                                 ng-options="(p|capitalize) for p in (allProviders|remove:configuredProviders)"
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html
index 4a5ad62fae..334825099e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html
@@ -1,144 +1,134 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li><a href="#/realms/{{realm.realm}}">General</a></li>
-                    <li data-ng-show="realm.social"><a href="#/realms/{{realm.realm}}/social-settings">Social</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/roles">Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/default-roles">Default Roles</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/required-credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/token-settings">Token</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/keys-settings">Keys</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/smtp-settings">Email</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/roles">Roles</a></li>
-                    <li class="active">{{role.name}}</li>
-                </ol>
-                <h2 class="pull-left" data-ng-hide="create"><span>{{realm.realm}}</span> {{role.name}}</h2>
-                <ol class="breadcrumb" data-ng-show="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}">Settings</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/roles">Roles</a></li>
-                    <li class="active">Add Role</li>
-                </ol>
-                <h2 class="pull-left" data-ng-show="create"><span>{{realm.realm}}</span> Add Role</h2>
-                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
-                <form name="realmForm" novalidate>
-                    <fieldset class="border-top">
-                        <div class="form-group">
-                            <label for="name">Role name <span class="required" data-ng-show="create">*</span></label>
+<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="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>
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}">General</a></li>
+        <li data-ng-show="realm.social"><a href="#/realms/{{realm.realm}}/social-settings">Social</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/roles">Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/default-roles">Default Roles</a></li>
+        <li><a href="#/realms/{{realm.realm}}/required-credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/token-settings">Token</a></li>
+        <li><a href="#/realms/{{realm.realm}}/keys-settings">Keys</a></li>
+        <li><a href="#/realms/{{realm.realm}}/smtp-settings">Email</a></li>
+    </ul>
 
-                            <div class="controls">
-                                <textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description"></textarea>
-                            </div>
-                        </div>
-                        <div class="form-group clearfix block">
-                            <label for="compositeSwitch" class="control-label">Composite Roles</label>
-                            <input ng-model="compositeSwitch" name="compositeSwitch" id="compositeSwitch" ng-disabled="compositeSwitchDisabled" onoffswitch />
-                        </div>
-                    </fieldset>
-                    <div class="form-actions" data-ng-show="create">
-                        <button type="submit" kc-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 id="content">
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}">Settings</a></li>
+            <li><a href="#/realms/{{realm.realm}}/roles">Roles</a></li>
+            <li class="active">{{role.name}}</li>
+        </ol>
+        <h2 data-ng-hide="create"><span>{{realm.realm}}</span> {{role.name}}</h2>
+        <ol class="breadcrumb" data-ng-show="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}">Settings</a></li>
+            <li><a href="#/realms/{{realm.realm}}/roles">Roles</a></li>
+            <li class="active">Add Role</li>
+        </ol>
+        <h2 data-ng-show="create"><span>{{realm.realm}}</span> Add Role</h2>
+        <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+        <form class="form-horizontal" name="realmForm" novalidate>
+            <fieldset>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="name">Role name <span class="required" data-ng-show="create">*</span></label>
+
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" id="name" name="name" data-ng-model="role.name" autofocus
+                               required data-ng-readonly="!create">
                     </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="description">Description </label>
 
-                    <div class="form-actions" data-ng-show="!create">
-                        <button type="submit" kc-save class="primary" data-ng-show="changed">Save
-                        </button>
-                        <button type="submit" kc-reset data-ng-show="changed">Clear changes
-                        </button>
-                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
-                            Delete
-                        </button>
+                    <div class="col-sm-4">
+                        <textarea class="form-control" rows="5" cols="50" id="description" name="description" data-ng-model="role.description"></textarea>
                     </div>
-
-                    <fieldset data-ng-show="!create && (compositeSwitch || role.composite)">
-                        <legend collapsed><span class="text">Composite Realm Roles</span> </legend>
-                        <div class="form-group">
-                            <div class="controls changing-selectors">
-                                <div class="select-title">
-                                    <label for="available">Available Roles</label>
-                                    <select id="available" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmRoles"
-                                            ng-options="r.name for r in realmRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned">Assigned Roles</label>
-                                    <select id="assigned" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmMappings"
-                                            ng-options="r.name for r in realmMappings">
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </fieldset>
-
-                    <fieldset ng-show="applications.length > 0 && !create && (compositeSwitch || role.composite)">
-                        <legend collapsed><span class="text">Composite Application Roles</span> </legend>
-                        <div class="form-group input-select">
-                            <label for="applications">Application</label>
-                            <div class="input-group">
-                                <div class="select-kc">
-                                    <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
-                                        <option value="" selected> Select an Application...</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form-group" ng-show="compositeApp">
-                            <div class="controls changing-selectors application">
-                                <div class="select-title">
-                                    <label for="available-app">Available Roles</label>
-                                    <select id="available-app" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationRoles"
-                                            ng-options="r.name for r in applicationRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned-app">Assigned Roles</label>
-                                    <select id="assigned-app" class="form-control" multiple size=5
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationMappings"
-                                            ng-options="r.name for r in applicationMappings">
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                    </fieldset>
-
-                </form>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="compositeSwitch" class="control-label">Composite Roles</label>
+                    <div class="col-sm-4">
+                        <input ng-model="compositeSwitch" name="compositeSwitch" id="compositeSwitch" ng-disabled="compositeSwitchDisabled" onoffswitch />
+                    </div>
+                </div>
+            </fieldset>
+            <div class="pull-right form-actions" data-ng-show="create">
+                <button kc-cancel data-ng-click="cancel()" data-ng-show="changed">Cancel</button>
+                <button kc-save data-ng-show="changed">Save</button>
             </div>
-        </div>
-        <div id="container-right-bg"></div>
+
+            <div class="pull-right  form-actions" data-ng-show="!create">
+                <button kc-reset data-ng-show="changed">Clear changes</button>
+                <button kc-save data-ng-show="changed">Save</button>
+                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
+            </div>
+
+            <fieldset data-ng-show="!create && (compositeSwitch || role.composite)">
+                <legend collapsed><span class="text">Composite Realm Roles</span> </legend>
+                <div class="form-group">
+                    <div class="controls changing-selectors">
+                        <div class="select-title">
+                            <label for="available">Available Roles</label>
+                            <select id="available" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmRoles"
+                                    ng-options="r.name for r in realmRoles">
+                            </select>
+                        </div>
+                        <div class="middle-buttons">
+                            <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
+                            <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
+                        </div>
+                        <div class="select-title">
+                            <label for="assigned">Assigned Roles</label>
+                            <select id="assigned" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmMappings"
+                                    ng-options="r.name for r in realmMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+
+            <fieldset ng-show="applications.length > 0 && !create && (compositeSwitch || role.composite)">
+                <legend collapsed><span class="text">Composite Application Roles</span> </legend>
+                <div class="form-group input-select">
+                    <label for="applications">Application</label>
+                    <div class="input-group">
+                        <div class="select-kc">
+                            <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
+                                <option value="" selected> Select an Application...</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" ng-show="compositeApp">
+                    <div class="controls changing-selectors application">
+                        <div class="select-title">
+                            <label class="control-label" for="available-app">Available Roles</label>
+                            <select id="available-app" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationRoles"
+                                    ng-options="r.name for r in applicationRoles">
+                            </select>
+                        </div>
+                        <div class="middle-buttons">
+                            <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
+                            <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
+                        </div>
+                        <div class="select-title">
+                            <label class="control-label" for="assigned-app">Assigned Roles</label>
+                            <select id="assigned-app" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationMappings"
+                                    ng-options="r.name for r in applicationMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+
+        </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
index e87f890ad2..1ef0b64234 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-list.html
@@ -12,18 +12,18 @@
             <p><strong>You have not configured realm roles.</strong> <a class="kc-button" href="#/create/role/{{realm.realm}}">Add Role</a></p>
         </div>
         <div class="panel">
-            <table data-ng-hide="!roles || roles.length == 0">
+            <table class="table" data-ng-hide="!roles || roles.length == 0">
                 <thead>
                 <tr>
-                    <th class="rcue-table-actions" colspan="3">
-                        <div class="actions">
+                    <th class="kc-table-actions" colspan="3">
+                        <div class="pull-right">
                             <a class="kc-button" href="#/create/role/{{realm.realm}}">Add Role</a>
                             <!-- <button class="remove disabled">Remove</button> -->
                         </div>
                     </th>
                 </tr>
                 <tr data-ng-show="roles && roles.length > 5">
-                    <th class="rcue-table-actions" colspan="3">
+                    <th class="kc-table-actions" colspan="3">
                         <div class="search-comp clearfix">
                             <input type="text" placeholder="Search..." class="search">
                             <button class="icon-search" tooltip-placement="right"
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
index 1cd8d6c94c..7bb365f6d7 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-mappings.html
@@ -1,92 +1,93 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs" >
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></li>
-                    <li class="active">Role Mappings</li>
-                </ol>
-                <h2 class="pull-left"><span>{{user.username}}'s</span> Role Mappings</h2>
-                <p class="subtitle">All fields required</p>
-                <form name="realmForm" novalidate>
-                    <fieldset>
-                        <legend uncollapsed><span class="text">Realm Roles</span> </legend>
-                        <div class="form-group">
-                            <div class="controls changing-selectors">
-                                <div class="select-title">
-                                    <label for="available">Available Roles</label>
-                                    <select id="available" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedRealmRoles"
-                                            ng-options="r.name for r in realmRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned">Assigned Roles</label>
-                                    <select id="assigned" class="form-control" multiple size=5
-                                        ng-multiple="true"
-                                        ng-model="selectedRealmMappings"
-                                        ng-options="r.name for r in realmMappings">
-                                    </select>
-                                </div>
-                            </div>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
+        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
+    </ul>
+    <div id="content">
+        <ol class="breadcrumb">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
+            <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></li>
+            <li class="active">Role Mappings</li>
+        </ol>
+        <h2><span>{{user.username}}'s</span> Role Mappings</h2>
+        <p class="subtitle">All fields required</p>
+        <form class="form-horizontal" name="realmForm" novalidate>
+            <fieldset>
+                <legend uncollapsed><span class="text">Realm Roles</span> </legend>
+                <div class="form-group">
+                    <div class="controls changing-selectors">
+                        <div class="select-title">
+                            <label for="available">Available Roles</label>
+                            <select id="available" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmRoles"
+                                    ng-options="r.name for r in realmRoles">
+                            </select>
                         </div>
-                    </fieldset>
-                    
-                    <fieldset ng-show="applications.length > 0">
-                        <legend collapsed><span class="text">Application Roles</span> </legend>
-                        <div class="form-group input-select">
-                            <label for="applications">Application</label>
-                            <div class="input-group">
-                                <div class="select-kc">
-                                    <select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
-                                        <option value="" selected> Select an Application...</option>
-                                    </select>
-                                </div>
-                            </div>
+                        <div class="middle-buttons">
+                            <button class="kc-button kc-vertical" type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button kc-vertical" type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
                         </div>
-                        <div class="form-group" ng-show="application">
-                            <div class="controls changing-selectors application">
-                                <div class="select-title">
-                                    <label for="available-app">Available Roles</label>
-                                    <select id="available-app" class="form-control" multiple size="5"
-                                            ng-multiple="true"
-                                            ng-model="selectedApplicationRoles"
-                                            ng-options="r.name for r in applicationRoles">
-                                    </select>
-                                </div>
-                                <div class="middle-buttons">
-                                    <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                                    <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
-                                </div>
-                                <div class="select-title">
-                                    <label for="assigned-app">Assigned Roles</label>
-                                    <select id="assigned-app" class="form-control" multiple size=5
-                                        ng-multiple="true"
-                                        ng-model="selectedApplicationMappings"
-                                        ng-options="r.name for r in applicationMappings">
-                                    </select>
-                                </div>
-                            </div>
+                        <div class="select-title">
+                            <label for="assigned">Assigned Roles</label>
+                            <select id="assigned" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedRealmMappings"
+                                    ng-options="r.name for r in realmMappings">
+                            </select>
                         </div>
-                    </fieldset>
-                </form>
-            </div>
-        </div>
-        <div id="container-right-bg"></div>
+                    </div>
+                </div>
+            </fieldset>
+
+            <fieldset ng-show="applications.length > 0">
+                <legend collapsed><span class="text">Application Roles</span> </legend>
+                <div class="form-group input-select">
+                    <label for="applications">Application</label>
+                    <div class="input-group">
+                        <div class="select-kc">
+                            <select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
+                                <option value="" selected> Select an Application...</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" ng-show="application">
+                    <div class="controls changing-selectors application">
+                        <div class="select-title">
+                            <label for="available-app">Available Roles</label>
+                            <select id="available-app" class="form-control" multiple size="5"
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationRoles"
+                                    ng-options="r.name for r in applicationRoles">
+                            </select>
+                        </div>
+                        <div class="middle-buttons">
+                            <button class="kc-button kc-vertical" type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button kc-vertical" type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
+                        </div>
+                        <div class="select-title">
+                            <label for="assigned-app">Assigned Roles</label>
+                            <select id="assigned-app" class="form-control" multiple size=5
+                                    ng-multiple="true"
+                                    ng-model="selectedApplicationMappings"
+                                    ng-options="r.name for r in applicationMappings">
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </form>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html
index b5fb987208..5bc1f280fc 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html
@@ -1,14 +1,13 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
+
+                <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
                     <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
                     <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
                     <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
                 </ul>
-            </div>
+
             <div id="content">
                 <ol class="breadcrumb">
                     <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
@@ -16,36 +15,33 @@
                 </ol>
                 <h2><span>{{user.username}}'s</span> Credentials</h2>
 
-                <form name="userForm" novalidate>
+                <form class="form-horizontal" name="userForm" novalidate>
                     <fieldset class="border-top">
                         <legend uncollapsed><span class="text">Credential Management</span></legend>
                         <div class="form-group">
-                            <label for="password">Reset password</label>
-                            <div class="controls">
-                                <input type="password" id="password" name="password" data-ng-model="password" placeholder="Temporary password" required>
-                                <input type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword" placeholder="Password confirmation" required>
-                                <button type="submit" data-ng-click="resetPassword()" class="destructive" data-ng-show="password">Reset Password</button>
+                            <label class="col-sm-2 control-label" for="password">Reset password</label>
+                            <div class="col-sm-4 kc-multiline">
+                                <input class="form-control" type="password" id="password" name="password" data-ng-model="password" placeholder="Temporary password" required>
+                                <input class="form-control" type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword" placeholder="Password confirmation" required>
+                                <button class="btn btn-danger" type="submit" data-ng-click="resetPassword()" data-ng-show="password">Reset Password</button>
                             </div>
                         </div>
 
                         <div class="form-group" data-ng-show="user.email">
-                            <label for="password">Reset password email</label>
-                            <div class="controls">
-                                <button type="submit" data-ng-click="resetPasswordEmail()" class="destructive">Send Email</button>
+                            <label class="col-sm-2 control-label" for="password">Reset password email</label>
+                            <div class="col-sm-4">
+                                <button class="btn btn-danger" type="submit" data-ng-click="resetPasswordEmail()" >Send Email</button>
                             </div>
                         </div>
 
                         <div class="form-group" data-ng-show="user.totp">
-                            <label for="password">Remove totp</label>
-                            <div class="controls" data-ng-show="user.totp">
-                                <button type="submit" data-ng-click="removeTotp()" class="destructive">Remove TOTP</button>
+                            <label class="col-sm-2 control-label" for="password">Remove totp</label>
+                            <div class="col-sm-4" data-ng-show="user.totp">
+                                <button class="btn btn-danger"  type="submit" data-ng-click="removeTotp()">Remove TOTP</button>
                             </div>
                         </div>
                     </fieldset>
                 </form>
 
             </div>
-        </div>
-        <div id="container-right-bg"></div>
-    </div>
-</div>
\ No newline at end of file
+        </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html
index 95b099ea68..eceacaabd9 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html
@@ -1,109 +1,95 @@
-<div id="wrapper" class="container">
-    <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-show="create">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div class="top-nav" data-ng-show="!create">
-                <ul class="rcue-tabs" >
+
+                <ul class="nav nav-tabs nav-tabs-pf" data-ng-show="!create">
                     <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
                     <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
                     <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
                 </ul>
-            </div>
+
             <div id="content">
                 <ol class="breadcrumb" data-ng-show="create">
                     <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
                     <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
                     <li class="active">Add</li>
                 </ol>
-                <h2 class="pull-left" data-ng-show="create">Add User</h2>
+                <h2 data-ng-show="create">Add User</h2>
                 <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
-
                 <ol class="breadcrumb" data-ng-hide="create">
                     <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
                     <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
                     <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></li>
                     <li class="active">Attributes</li>
                 </ol>
-                <h2 class="pull-left" data-ng-hide="create"><span>{{user.username}}'s</span> Attributes</h2>
+                <h2 data-ng-hide="create"><span>{{user.username}}'s</span> Attributes</h2>
                 
-                <form name="userForm" novalidate>
+                <form class="form-horizontal" name="userForm" novalidate>
                     <fieldset class="border-top">
                         <div class="form-group">
-                            <label for="username">Username <span class="required" data-ng-show="create">*</span></label>
-                            <div class="controls">
+                            <label class="col-sm-2 control-label"for="username">Username <span class="required" data-ng-show="create">*</span></label>
+                            <div class="col-sm-4">
                                 <!-- Characters >,<,/,\ are forbidden in username -->
-                                <input type="text" id="username" name="username" data-ng-model="user.username" autofocus
+                                <input class="form-control" type="text" id="username" name="username" data-ng-model="user.username" autofocus
                                        required ng-pattern="/^[^\<\>\\\/]*$/" data-ng-readonly="!create">
                             </div>
                         </div>
 
                         <div class="form-group">
-                            <label for="email" class="control-label">Email</label>
+                            <label class="col-sm-2 control-label" for="email">Email</label>
 
-                            <div class="controls">
-                                <input class="input-small" type="email" name="email" id="email"
+                            <div class="col-sm-4">
+                                <input class="form-control" type="email" name="email" id="email"
                                        data-ng-model="user.email">
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="firstName" class="control-label">First Name</label>
+                            <label class="col-sm-2 control-label" for="firstName">First Name</label>
 
-                            <div class="controls">
-                                <input class="input-small" type="text" name="firstName" id="firstName"
+                            <div class="col-sm-4">
+                                <input class="form-control" type="text" name="firstName" id="firstName"
                                        data-ng-model="user.firstName">
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="lastName" class="control-label">Last Name</label>
+                            <label class="col-sm-2 control-label" for="lastName">Last Name</label>
 
-                            <div class="controls">
-                                <input class="input-small" type="text" name="lastName" id="lastName"
+                            <div class="col-sm-4">
+                                <input class="form-control" type="text" name="lastName" id="lastName"
                                        data-ng-model="user.lastName">
                             </div>
                         </div>
 
                         <div class="form-group clearfix block">
-                            <label for="userEnabled" class="control-label">User Enabled</label>
+                            <label class="col-sm-2 control-label" for="userEnabled">User Enabled</label>
+                            <div class="col-sm-4">
                             <input ng-model="user.enabled" name="userEnabled" id="userEnabled" onoffswitch />
+                                </div>
                         </div>
                         <div class="form-group clearfix block">
-                            <label for="emailVerified" class="control-label">Email verified</label>
+                            <label class="col-sm-2 control-label" for="emailVerified">Email verified</label>
+                            <div class="col-sm-4">
                             <input ng-model="user.emailVerified" name="emailVerified" id="emailVerified" onoffswitch />
+                                </div>
                         </div>
                         <div class="form-group clearfix">
-                            <label for="reqActions" class="control-label two-lines">Required User Actions</label>
+                            <label class="col-sm-2 control-label" for="reqActions">Required User Actions</label>
 
-                            <div class="controls">
+                            <div class="col-sm-4">
                                 <input type="text" ui-select2="userReqActionsOptions" ng-model="userActions" id="reqActions"/>
                             </div>
                         </div>
                     </fieldset>
-                    <div class="form-actions" data-ng-show="create">
-                        <button type="submit" kc-save class="primary" data-ng-show="changed">Save
-                        </button>
-                        <button type="submit" data-ng-click="cancel()">Cancel
-                        </button>
+                    <div class="pull-right form-actions" data-ng-show="create">
+                        <button kc-cancel data-ng-click="cancel()">Cancel</button>
+                        <button kc-save data-ng-show="changed">Save</button>
                     </div>
 
-                    <div class="form-actions" data-ng-show="!create">
-                        <button type="submit" kc-save class="primary" data-ng-show="changed">Save
-                        </button>
-                        <button type="submit" kc-reset data-ng-show="changed">Clear changes
-                        </button>
-                        <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
-                            Delete
-                        </button>
+                    <div class="pull-right form-actions" data-ng-show="!create">
+                        <button kc-reset data-ng-show="changed">Clear changes</button>
+                        <button kc-save  data-ng-show="changed">Save</button>
+                        <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
                     </div>
 
                 </form>
             </div>
-        </div>
-        <div id="container-right-bg"></div>
-    </div>
-</div>
-</div>
\ No newline at end of file
+        </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html
index ac727d8217..b7ecfa2fc4 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html
@@ -1,79 +1,72 @@
-<div id="wrapper" class="container">
-    <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">
-                <ul class="rcue-tabs">
-                    <li></li>
-                </ul>
-            </div>
-            <div id="content">
-                <ol class="breadcrumb">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li class="active">Users</li>
-                </ol>
-                <h2><span>{{realm.realm}}</span> Users</h2>
-                <table>
-                    <caption data-ng-show="users" class="hidden">Table of realm users</caption>
-                    <thead>
-                        <tr>
-                            <th class="rcue-table-actions" colspan="4">
-                                <div class="search-comp clearfix">
-                                    <input type="text" placeholder="Search..." data-ng-model="search" class="search"
-                                           onkeyup="if(event.keyCode == 13){$(this).next('button').click();}">
-                                    <button data-ng-click="searchQuery()" type="submit"
-                                            class="icon-search" tooltip-placement="right"
-                                            tooltip="Search by full name, last name, email, or username.">
-                                        Icon: search
-                                    </button>
-                                </div>
-                                <span><span>or</span><button class="link" ng-click="search = null; searchQuery()">View all users</button></span>
-                                <div class="actions">
-                                    <a class="button" href="#/create/user/{{realm.realm}}">Add User</a>
-                                </div>
-                            </th>
-                        </tr>
-                        <tr>
-                            <tr data-ng-show="searchLoaded && users.length > 0">
-                                <th>Username</th>
-                                <th>Last Name</th>
-                                <th>First Name</th>
-                                <th>Email</th>
-                            </tr>
-                        </tr>
-                    </thead>
-                    <!-- todo -->
-                    <!--<tfoot data-ng-show="users && users.length > 10">
-                    <tr>
-                        <td colspan="4">
-                            <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>
-                    <tr ng-repeat="user in users">
-                        <td><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></td>
-                        <td>{{user.lastName}}</td>
-                        <td>{{user.firstName}}</td>
-                        <td>{{user.email}}</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <div class="feedback warning inline" data-ng-show="searchLoaded && users.length == 0">
-                    <p data-ng-show="lastSearch != null"><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
-                    <p data-ng-show="lastSearch == null"><strong>No users present.</strong><br>Create some using the "Add User" button.</p>
-                </div>
-                <div class="feedback info inline" data-ng-show="!users">
-                    <br/>
-                    <p><strong>Search for users.</strong><br>Please enter a search to display users.</p>
-                </div>
-            </div>
+<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">
+    <ul class="nav nav-tabs nav-tabs-pf">
+        <li class="active"><a href="">User List</a></li>
+    </ul>
+    <div id="content">
+        <ol class="breadcrumb">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li class="active">Users</li>
+        </ol>
+        <h2><span>{{realm.realm}}</span> Users</h2>
+        <table class="table">
+            <caption data-ng-show="users" class="hidden">Table of realm users</caption>
+            <thead>
+            <tr>
+                <th class="kc-table-actions" colspan="4">
+                    <div class="search-comp clearfix">
+                        <input type="text" placeholder="Search..." data-ng-model="search" class="form-control search"
+                               onkeyup="if(event.keyCode == 13){$(this).next('button').click();}">
+                        <button data-ng-click="searchQuery()" type="submit"
+                                class="kc-icon-search" tooltip-placement="right"
+                                tooltip="Search by full name, last name, email, or username.">
+                            Icon: search
+                        </button>
+                    </div>
+                    <span><span>or</span><button class="kc-link" ng-click="search = null; searchQuery()">View all users</button></span>
+                    <div class="pull-right">
+                        <a class="kc-button" href="#/create/user/{{realm.realm}}">Add User</a>
+                    </div>
+                </th>
+            </tr>
+            <tr>
+            <tr data-ng-show="searchLoaded && users.length > 0">
+                <th>Username</th>
+                <th>Last Name</th>
+                <th>First Name</th>
+                <th>Email</th>
+            </tr>
+            </tr>
+            </thead>
+            <!-- todo -->
+            <!--<tfoot data-ng-show="users && users.length > 10">
+            <tr>
+                <td colspan="4">
+                    <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>
+            <tr ng-repeat="user in users">
+                <td><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></td>
+                <td>{{user.lastName}}</td>
+                <td>{{user.firstName}}</td>
+                <td>{{user.email}}</td>
+            </tr>
+            </tbody>
+        </table>
+        <div class="feedback warning inline" data-ng-show="searchLoaded && users.length == 0">
+            <p data-ng-show="lastSearch != null"><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
+            <p data-ng-show="lastSearch == null"><strong>No users present.</strong><br>Create some using the "Add User" button.</p>
+        </div>
+        <div class="feedback info inline" data-ng-show="!users">
+            <br/>
+            <p><strong>Search for users.</strong><br>Please enter a search to display users.</p>
         </div>
-        <div id="container-right-bg"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html
new file mode 100644
index 0000000000..0024f3a4bc
--- /dev/null
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html
@@ -0,0 +1,11 @@
+<div>
+    <div class="pull-right form-actions" data-ng-show="kcCreate">
+        <button kc-button-cancel data-ng-click="kcActionCancel()">Cancel</button>
+        <button kc-button-save data-ng-show="kcChanged">Save</button>
+    </div>
+    <div class="pull-right form-actions" data-ng-show="!kcCreate">
+        <button kc-button-reset data-ng-show="kcChanged">Clear changes</button>
+        <button kc-button-save  data-ng-show="kcChanged">Save</button>
+        <button kc-button-delete data-ng-hide="kcChanged" data-ng-click="kcActionRemove()">Delete</button>
+    </div>
+</div>
\ No newline at end of file