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 7025d2ee44..c29d90aa03 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
@@ -11,6 +11,9 @@ module.config([ '$routeProvider', function($routeProvider) {
             resolve : {
                 realm : function(RealmLoader) {
                     return {};
+                },
+                roles : function() {
+                    return {};
                 }
             },
             controller : 'RealmDetailCtrl'
@@ -20,6 +23,9 @@ module.config([ '$routeProvider', function($routeProvider) {
             resolve : {
                 realm : function(RealmLoader) {
                     return RealmLoader();
+                },
+                roles : function(RoleListLoader) {
+                    return RoleListLoader();
                 }
             },
             controller : 'RealmDetailCtrl'
@@ -240,6 +246,9 @@ module.config([ '$routeProvider', function($routeProvider) {
                 },
                 application : function() {
                     return {};
+                },
+                roles : function() {
+                    return {};
                 }
             },
             controller : 'ApplicationDetailCtrl'
@@ -255,6 +264,9 @@ module.config([ '$routeProvider', function($routeProvider) {
                 },
                 application : function(ApplicationLoader) {
                     return ApplicationLoader();
+                },
+                roles : function(ApplicationRoleListLoader) {
+                    return ApplicationRoleListLoader();
                 }
             },
             controller : 'ApplicationDetailCtrl'
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers.js
index a154da3657..d5908aaeba 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers.js
@@ -21,3 +21,16 @@ function randomString(len) {
     return randomString;
 }
 
+function getAvailableRoles(roles, systemRoles){
+    var complement = [];
+
+    for (var i = 0; i < roles.length; i++){
+        var roleName = roles[i].name;
+
+        if (systemRoles.indexOf(roleName) < 0){
+            complement.push(roleName);
+        }
+    }
+
+    return complement;
+}
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/applications.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/applications.js
index cc28637c9b..7b744548b4 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/applications.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/applications.js
@@ -171,7 +171,7 @@ module.controller('ApplicationListCtrl', function($scope, realm, applications, A
     });
 });
 
-module.controller('ApplicationDetailCtrl', function($scope, realm, application, Application, $location, Dialog, Notifications) {
+module.controller('ApplicationDetailCtrl', function($scope, realm, application, roles, Application, $location, Dialog, Notifications) {
     console.log('ApplicationDetailCtrl');
 
     $scope.realm = realm;
@@ -182,6 +182,17 @@ module.controller('ApplicationDetailCtrl', function($scope, realm, application,
         $scope.application = {};
     }
 
+    console.log(application);
+
+    var systemRoles = ["*", "KEYCLOAK_APPLICATION","KEYCLOAK_IDENTITY_REQUESTER"];
+    var availableRoles = getAvailableRoles(roles, systemRoles);
+
+    $scope.appDefaultRolesOptions = {
+        'multiple' : true,
+        'simple_tags' : true,
+        'tags' : availableRoles
+    };
+
     $scope.$watch(function() {
         return $location.path();
     }, function() {
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
index fa11a545a8..dc914f4cfb 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
@@ -44,11 +44,20 @@ module.controller('RealmDropdownCtrl', function($scope, Realm, Current, Auth, $l
     }
 });
 
-module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, $http, $location, Dialog, Notifications) {
+module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, roles, $http, $location, Dialog, Notifications) {
     $scope.createRealm = !realm.id;
 
     console.log('RealmDetailCtrl');
 
+    var systemRoles = ["*", "KEYCLOAK_APPLICATION","KEYCLOAK_IDENTITY_REQUESTER"];
+    var availableRoles = getAvailableRoles(roles, systemRoles);
+
+    $scope.realmDefaultRolesOptions = {
+        'multiple' : true,
+        'simple_tags' : true,
+        'tags' : availableRoles
+    };
+
     if ($scope.createRealm) {
         $scope.realm = {
             enabled: true,
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 2c11b73c62..ba6c051092 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
@@ -103,6 +103,16 @@
                             </div>
                         </div>
                     </fieldset>
+                    <fieldset>
+                        <legend uncollapsed><span class="text">Default Roles</span></legend>
+                        <div class="form-group">
+                            <label for="default-roles" class="control-label two-lines">Default Application Roles</label>
+
+                            <div class="controls">
+                                <input id="default-roles" type="text" ui-select2="appDefaultRolesOptions" ng-model="application.defaultRoles" placeholder="Type a role and enter">
+                            </div>
+                        </div>
+                    </fieldset>
                     <div class="form-actions" data-ng-show="create">
                         <button type="submit" data-ng-click="save()" data-ng-show="changed" class="primary">Save
                         </button>
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 d35d8cdfa4..4cae0f5782 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
@@ -143,6 +143,16 @@
                             </div>
                         </div>
                     </fieldset>
+                    <fieldset>
+                        <legend uncollapsed><span class="text">Default Roles</span></legend>
+                        <div class="form-group">
+                            <label for="default-roles" class="control-label two-lines">Default Realm Roles</label>
+
+                            <div class="controls">
+                                <input id="default-roles" type="text" ui-select2="realmDefaultRolesOptions" ng-model="realm.defaultRoles" placeholder="Type a role and enter">
+                            </div>
+                        </div>
+                    </fieldset>
                     <div class="form-actions" data-ng-show="createRealm">
                         <button type="submit" data-ng-click="save()" class="primary" data-ng-show="changed">Save
                         </button>