diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/client-role-detail.html b/themes/src/main/resources/theme/base/admin/resources/partials/client-role-detail.html
index 71621517ab..de1a76302d 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/client-role-detail.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/client-role-detail.html
@@ -75,7 +75,7 @@
                             <select id="available" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedRealmRoles"
-                                    ng-options="r.name for r in realmRoles">
+                                    ng-options="r.name for r in realmRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedRealmRoles.length == 0" class="btn btn-default" type="submit" ng-click="addRealmRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -87,7 +87,7 @@
                             <select id="assigned" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedRealmMappings"
-                                    ng-options="r.name for r in realmMappings">
+                                    ng-options="r.name for r in realmMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedRealmMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteRealmRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -100,7 +100,7 @@
             <div class="form-group" ng-show="clients.length > 0 && !create && (compositeSwitch || role.composite)">
                 <label class="col-md-2 control-label" class="control-label">
                     <span>{{:: 'client-roles' | translate}}</span>
-                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="compositeClient" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="compositeClient" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
                 </label>
 
                 <div class="col-md-10">
@@ -114,7 +114,7 @@
                             <select id="available-client" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedClientRoles"
-                                    ng-options="r.name for r in clientRoles">
+                                    ng-options="r.name for r in clientRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientRoles.length == 0" class="btn btn-default" type="submit" ng-click="addClientRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -126,7 +126,7 @@
                             <select id="assigned-client" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedClientMappings"
-                                    ng-options="r.name for r in clientMappings">
+                                    ng-options="r.name for r in clientMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteClientRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/client-scope-mappings.html b/themes/src/main/resources/theme/base/admin/resources/partials/client-scope-mappings.html
index a784ea1359..47ab627fbd 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/client-scope-mappings.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/client-scope-mappings.html
@@ -53,7 +53,7 @@
                             <select id="available" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedRealmRoles"
-                                    ng-options="r.name for r in realmRoles">
+                                    ng-options="r.name for r in realmRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedRealmRoles.length == 0" class="btn btn-default" type="submit" ng-click="addRealmRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -65,7 +65,7 @@
                             <select id="assigned" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedRealmMappings"
-                                    ng-options="r.name for r in realmMappings">
+                                    ng-options="r.name for r in realmMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedRealmMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteRealmRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -77,7 +77,7 @@
                             <select id="realm-composite" class="form-control" multiple size=5
                                     disabled="true"
                                     ng-model="dummymodel"
-                                    ng-options="r.name for r in realmComposite">
+                                    ng-options="r.name for r in realmComposite | orderBy:'name'">
                             </select>
                         </div>
                     </div>
@@ -87,7 +87,7 @@
             <div class="form-group">
                 <label class="col-md-2 control-label" class="control-label">
                     <span>{{:: 'client-roles' | translate}}</span>
-                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
                 </label>
 
                 <div class="col-md-10">
@@ -101,7 +101,7 @@
                             <select id="available-client" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedClientRoles"
-                                    ng-options="r.name for r in clientRoles">
+                                    ng-options="r.name for r in clientRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientRoles.length == 0" class="btn btn-default" type="submit" ng-click="addClientRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -113,7 +113,7 @@
                             <select id="assigned-client" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedClientMappings"
-                                    ng-options="r.name for r in clientMappings">
+                                    ng-options="r.name for r in clientMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteClientRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -125,7 +125,7 @@
                             <select id="client-composite" class="form-control" multiple size=5
                                     disabled="true"
                                     ng-model="dummymodel"
-                                    ng-options="r.name for r in clientComposite">
+                                    ng-options="r.name for r in clientComposite | orderBy:'name'">
                             </select>
                         </div>
                     </div>
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/client-service-account-roles.html b/themes/src/main/resources/theme/base/admin/resources/partials/client-service-account-roles.html
index bc552daf86..27f967d408 100644
--- a/themes/src/main/resources/theme/base/admin/resources/partials/client-service-account-roles.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/client-service-account-roles.html
@@ -22,7 +22,7 @@
                         <select id="available" class="form-control" multiple size="5"
                                 ng-multiple="true"
                                 ng-model="selectedRealmRoles"
-                                ng-options="r.name for r in realmRoles">
+                                ng-options="r.name for r in realmRoles | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedRealmRoles.length == 0" class="btn btn-default" type="submit" ng-click="addRealmRole()">
                             {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -34,7 +34,7 @@
                         <select id="assigned" class="form-control" multiple size=5
                                 ng-multiple="true"
                                 ng-model="selectedRealmMappings"
-                                ng-options="r.name for r in realmMappings">
+                                ng-options="r.name for r in realmMappings | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedRealmMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteRealmRole()">
                             <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -46,7 +46,7 @@
                         <select id="realm-composite" class="form-control" multiple size=5
                                 disabled="true"
                                 ng-model="dummymodel"
-                                ng-options="r.name for r in realmComposite">
+                                ng-options="r.name for r in realmComposite | orderBy:'name'">
                         </select>
                     </div>
                 </div>
@@ -56,7 +56,7 @@
         <div class="form-group">
             <label class="col-md-2 control-label" class="control-label">
                 <span>{{:: 'client-roles' | translate}}</span>
-                <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
             </label>
 
             <div class="col-md-10">
@@ -70,7 +70,7 @@
                         <select id="available-client" class="form-control" multiple size="5"
                                 ng-multiple="true"
                                 ng-model="selectedClientRoles"
-                                ng-options="r.name for r in clientRoles">
+                                ng-options="r.name for r in clientRoles | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedClientRoles.length == 0" class="btn btn-default" type="submit" ng-click="addClientRole()">
                             {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -82,7 +82,7 @@
                         <select id="assigned-client" class="form-control" multiple size=5
                                 ng-multiple="true"
                                 ng-model="selectedClientMappings"
-                                ng-options="r.name for r in clientMappings">
+                                ng-options="r.name for r in clientMappings | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedClientMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteClientRole()">
                             <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -94,7 +94,7 @@
                         <select id="client-composite" class="form-control" multiple size=5
                                 disabled="true"
                                 ng-model="dummymodel"
-                                ng-options="r.name for r in clientComposite">
+                                ng-options="r.name for r in clientComposite | orderBy:'name'">
                         </select>
                     </div>
                 </div>
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/client-template-scope-mappings.html b/themes/src/main/resources/theme/base/admin/resources/partials/client-template-scope-mappings.html
index 7a6e3f8515..e5be70f467 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/client-template-scope-mappings.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/client-template-scope-mappings.html
@@ -33,7 +33,7 @@
                             <select id="available" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedRealmRoles"
-                                    ng-options="r.name for r in realmRoles">
+                                    ng-options="r.name for r in realmRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedRealmRoles.length == 0" class="btn btn-default" type="submit" ng-click="addRealmRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -45,7 +45,7 @@
                             <select id="assigned" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedRealmMappings"
-                                    ng-options="r.name for r in realmMappings">
+                                    ng-options="r.name for r in realmMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedRealmMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteRealmRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -57,7 +57,7 @@
                             <select id="realm-composite" class="form-control" multiple size=5
                                     disabled="true"
                                     ng-model="dummymodel"
-                                    ng-options="r.name for r in realmComposite">
+                                    ng-options="r.name for r in realmComposite | orderBy:'name'">
                             </select>
                         </div>
                     </div>
@@ -67,7 +67,7 @@
             <div class="form-group">
                 <label class="col-md-2 control-label" class="control-label">
                     <span>{{:: 'client-roles' | translate}}</span>
-                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
                 </label>
 
                 <div class="col-md-10">
@@ -81,7 +81,7 @@
                             <select id="available-client" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedClientRoles"
-                                    ng-options="r.name for r in clientRoles">
+                                    ng-options="r.name for r in clientRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientRoles.length == 0" class="btn btn-default" type="submit" ng-click="addClientRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -93,7 +93,7 @@
                             <select id="assigned-client" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedClientMappings"
-                                    ng-options="r.name for r in clientMappings">
+                                    ng-options="r.name for r in clientMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteClientRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -105,7 +105,7 @@
                             <select id="client-composite" class="form-control" multiple size=5
                                     disabled="true"
                                     ng-model="dummymodel"
-                                    ng-options="r.name for r in clientComposite">
+                                    ng-options="r.name for r in clientComposite | orderBy:'name'">
                             </select>
                         </div>
                     </div>
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/group-role-mappings.html b/themes/src/main/resources/theme/base/admin/resources/partials/group-role-mappings.html
index bcb3150df3..9a1c5b814a 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/group-role-mappings.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/group-role-mappings.html
@@ -17,7 +17,7 @@
                         <select id="available" class="form-control" multiple size="5"
                                 ng-multiple="true"
                                 ng-model="selectedRealmRoles"
-                                ng-options="r.name for r in realmRoles">
+                                ng-options="r.name for r in realmRoles | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedRealmRoles.length == 0" ng-disabled="c.length == 0" class="btn btn-default" type="submit" ng-click="addRealmRole()">
                             {{:: 'add-selected' | translate}} <i class="fa fa-angle-right"></i>
@@ -30,7 +30,7 @@
                         <select id="assigned" class="form-control" multiple size=5
                                 ng-multiple="true"
                                 ng-model="selectedRealmMappings"
-                                ng-options="r.name for r in realmMappings">
+                                ng-options="r.name for r in realmMappings | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedRealmMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteRealmRole()">
                             <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -42,7 +42,7 @@
                         <select id="realm-composite" class="form-control" multiple size=5
                                 disabled="true"
                                 ng-model="dummymodel"
-                                ng-options="r.name for r in realmComposite">
+                                ng-options="r.name for r in realmComposite | orderBy:'name'">
                         </select>
                     </div>
                 </div>
@@ -52,7 +52,7 @@
         <div class="form-group">
                 <label class="col-md-2 control-label" class="control-label">
                     <span>{{:: 'client-roles' | translate}}</span>
-                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
                 </label>
                 <div class="col-md-10" kc-read-only="!access.manageUsers">
                     <div class="row" data-ng-hide="targetClient">
@@ -65,7 +65,7 @@
                             <select id="available-client" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedClientRoles"
-                                    ng-options="r.name for r in clientRoles">
+                                    ng-options="r.name for r in clientRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientRoles.length == 0" class="btn btn-default" type="submit" ng-click="addClientRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -77,7 +77,7 @@
                             <select id="assigned-client" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedClientMappings"
-                                    ng-options="r.name for r in clientMappings">
+                                    ng-options="r.name for r in clientMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteClientRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -89,7 +89,7 @@
                             <select id="client-composite" class="form-control" multiple size=5
                                     disabled="true"
                                     ng-model="dummymodel"
-                                    ng-options="r.name for r in clientComposite">
+                                    ng-options="r.name for r in clientComposite | orderBy:'name'">
                             </select>
                         </div>
                     </div>
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/realm-default-roles.html b/themes/src/main/resources/theme/base/admin/resources/partials/realm-default-roles.html
index f5b887f839..b8e611deaf 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/realm-default-roles.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/realm-default-roles.html
@@ -42,7 +42,7 @@
         <div class="form-group">
             <label class="col-md-2 control-label" class="control-label">
                 <span>{{:: 'client-roles' | translate}}</span>
-                <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="client" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="client" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
             </label>
             <div class="col-md-10" data-ng-show="client">
                 <div class="row" data-ng-hide="client">
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/role-detail.html b/themes/src/main/resources/theme/base/admin/resources/partials/role-detail.html
index 813aef90af..02b5c2ac52 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/role-detail.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/role-detail.html
@@ -96,7 +96,7 @@
             <div class="form-group">
                 <label class="col-md-2 control-label" class="control-label">
                     <span>{{:: 'client-roles' | translate}}</span>
-                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="compositeClient" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="compositeClient" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
                 </label>
 
                 <div class="col-md-10">
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/role-mappings.html b/themes/src/main/resources/theme/base/admin/resources/partials/role-mappings.html
index 9970be4801..b57b1d2973 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/role-mappings.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/role-mappings.html
@@ -17,7 +17,7 @@
                         <select id="available" class="form-control" multiple size="5"
                                 ng-multiple="true"
                                 ng-model="selectedRealmRoles"
-                                ng-options="r.name for r in realmRoles">
+                                ng-options="r.name for r in realmRoles | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedRealmRoles.length == 0" ng-disabled="c.length == 0" class="btn btn-default" type="submit" ng-click="addRealmRole()">
                             {{:: 'add-selected' | translate}} <i class="fa fa-angle-right"></i>
@@ -30,7 +30,7 @@
                         <select id="assigned" class="form-control" multiple size=5
                                 ng-multiple="true"
                                 ng-model="selectedRealmMappings"
-                                ng-options="r.name for r in realmMappings">
+                                ng-options="r.name for r in realmMappings | orderBy:'name'">
                         </select>
                         <button ng-disabled="selectedRealmMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteRealmRole()">
                             <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -42,7 +42,7 @@
                         <select id="realm-composite" class="form-control" multiple size=5
                                 disabled="true"
                                 ng-model="dummymodel"
-                                ng-options="r.name for r in realmComposite">
+                                ng-options="r.name for r in realmComposite | orderBy:'name'">
                         </select>
                     </div>
                 </div>
@@ -52,7 +52,7 @@
         <div class="form-group">
                 <label class="col-md-2 control-label" class="control-label">
                     <span>{{:: 'client-roles' | translate}}</span>
-                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients" ng-disabled="false"></select>
+                    <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="targetClient" ng-options="a.clientId for a in clients | orderBy:'clientId'" ng-disabled="false"></select>
                 </label>
                 <div class="col-md-10" kc-read-only="!access.manageUsers">
                     <div class="row" data-ng-hide="targetClient">
@@ -65,7 +65,7 @@
                             <select id="available-client" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedClientRoles"
-                                    ng-options="r.name for r in clientRoles">
+                                    ng-options="r.name for r in clientRoles | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientRoles.length == 0" class="btn btn-default" type="submit" ng-click="addClientRole()">
                                 {{:: 'add-selected' | translate}} <i class="fa fa-angle-double-right"></i>
@@ -77,7 +77,7 @@
                             <select id="assigned-client" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedClientMappings"
-                                    ng-options="r.name for r in clientMappings">
+                                    ng-options="r.name for r in clientMappings | orderBy:'name'">
                             </select>
                             <button ng-disabled="selectedClientMappings.length == 0" class="btn btn-default" type="submit" ng-click="deleteClientRole()">
                                 <i class="fa fa-angle-double-left"></i> {{:: 'remove-selected' | translate}}
@@ -89,7 +89,7 @@
                             <select id="client-composite" class="form-control" multiple size=5
                                     disabled="true"
                                     ng-model="dummymodel"
-                                    ng-options="r.name for r in clientComposite">
+                                    ng-options="r.name for r in clientComposite | orderBy:'name'">
                             </select>
                         </div>
                     </div>