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 dc914f4cfb..3f0e6c32bb 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
@@ -82,6 +82,8 @@ module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, rol
         $scope.realm.requireSsl = !realm.sslNotRequired;
     }
 
+    $scope.social = $scope.realm.social;
+
     var oldCopy = angular.copy($scope.realm);
 
 
@@ -113,6 +115,7 @@ module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, rol
                         }
                         $location.url("/realms/" + id);
                         Notifications.success("The realm has been created.");
+                        $scope.social = $scope.realm.social;
                     });
                 });
             } else {
@@ -131,6 +134,7 @@ module.controller('RealmDetailCtrl', function($scope, Current, Realm, realm, rol
                     });
                     $location.url("/realms/" + id);
                     Notifications.success("Your changes have been saved to the realm.");
+                    $scope.social = $scope.realm.social;
                 });
             }
         } else {
@@ -216,8 +220,13 @@ module.controller('RealmSocialCtrl', function($scope, realm, Realm, $location, N
         $scope.realm["socialProviders"] = realm.socialProviders;
     }
 
-    // Hardcoded provider list
-    $scope.availableProviders = [ "google", "facebook", "twitter"];
+    // Hardcoded provider list in form of map providerId:providerName
+    $scope.allProviders = { google:"Google", facebook:"Facebook", twitter:"Twitter" };
+    $scope.availableProviders = [];
+
+    for (var provider in $scope.allProviders){
+        $scope.availableProviders.push(provider);
+    }
 
     var oldCopy = angular.copy($scope.realm);
     $scope.changed = false;
@@ -235,6 +244,9 @@ module.controller('RealmSocialCtrl', function($scope, realm, Realm, $location, N
 
     // Fill in configured providers
     var initSocial = function() {
+        // postSaveProviders is used for remembering providers which were already validated after pressing the save button
+        // thanks to this it's easy to distinguish between newly added fields and those already tried to be saved
+        $scope.postSaveProviders = [];
         $scope.unsetProviders = [];
         $scope.configuredProviders = [];
 
@@ -250,7 +262,7 @@ module.controller('RealmSocialCtrl', function($scope, realm, Realm, $location, N
 
         // If no providers are already configured, you can add any of them
         if ($scope.configuredProviders.length == 0){
-            $scope.unsetProviders = $scope.availableProviders;
+            $scope.unsetProviders = $scope.availableProviders.slice(0);
         } else {
             for (var i = 0; i < $scope.availableProviders.length; i++){
                 var providerId = $scope.availableProviders[i];
@@ -279,6 +291,13 @@ module.controller('RealmSocialCtrl', function($scope, realm, Realm, $location, N
         delete $scope.realm.socialProviders[pId+".key"];
         delete $scope.realm.socialProviders[pId+".secret"];
         $scope.configuredProviders.remove($scope.configuredProviders.indexOf(pId));
+
+        // Removing from postSaveProviders, so the empty fields are not red if the provider is added to the list again
+        var rId = $scope.postSaveProviders.indexOf(pId);
+        if (rId > -1){
+            $scope.postSaveProviders.remove(rId)
+        }
+
         $scope.unsetProviders.push(pId);
     };
 
@@ -289,8 +308,6 @@ module.controller('RealmSocialCtrl', function($scope, realm, Realm, $location, N
     }, true);
 
     $scope.save = function() {
-        $scope.saveClicked = true;
-
         if ($scope.realmForm.$valid) {
             var realmCopy = angular.copy($scope.realm);
             realmCopy.social = true;
@@ -298,10 +315,12 @@ module.controller('RealmSocialCtrl', function($scope, realm, Realm, $location, N
             Realm.update(realmCopy, function () {
                 $location.url("/realms/" + realm.id + "/social-settings");
                 Notifications.success("Saved changes to realm");
+                oldCopy = realmCopy;
             });
         } else {
             $scope.realmForm.showErrors = true;
             Notifications.error("Some required fields are missing values.");
+            $scope.postSaveProviders = $scope.configuredProviders.slice(0);
         }
     };
 
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 3523385c2b..b530a0c259 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
@@ -5,7 +5,7 @@
             <div class="top-nav" data-ng-hide="createRealm">
                 <ul class="rcue-tabs">
                     <li class="active"><a href="#/realms/{{realm.id}}">General</a></li>
-                    <li data-ng-show="realm.social"><a href="#/realms/{{realm.id}}/social-settings">Social</a></li>
+                    <li data-ng-show="social"><a href="#/realms/{{realm.id}}/social-settings">Social</a></li>
                     <li><a href="#/realms/{{realm.id}}/roles">Roles</a></li>
                     <li><a href="#/realms/{{realm.id}}/required-credentials">Credentials</a></li>
                     <li><a href="#/realms/{{realm.id}}/token-settings">Token</a></li>
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 a046cc5a94..b0ef465b90 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
@@ -30,7 +30,8 @@
                                         <div class="actions">
                                             <div class="select-rcue">
                                                 <select ng-model="newProviderId"
-                                                        ng-options="p for p in unsetProviders"></select>
+                                                        ng-options="p as allProviders[p] for p in unsetProviders"
+                                                        placeholder="Please select"></select>
                                             </div>
                                             <div>
                                                 <button ng-click="addProvider()" ng-disabled="">Add Provider</button>
@@ -49,16 +50,16 @@
                                 <tr ng-repeat="pId in configuredProviders">
                                     <td>
                                         <div class="clearfix">
-                                            <input class="input-small disabled" type="text" placeholder="Key" value="{{pId}}" readonly>
+                                            <input class="input-small disabled" type="text" value="{{allProviders[pId]}}" readonly>
                                         </div>
                                     </td>
                                     <td>
                                         <input class="input-small" type="text" placeholder="Key" ng-model="realm.socialProviders[pId+'.key']"
-                                               ng-class="{'dirty': saveClicked}" required>
+                                               ng-class="{'dirty': postSaveProviders.indexOf(pId) > -1}" required>
                                     </td>
                                     <td>
                                         <input class="input-small" type="text" placeholder="Secret" ng-model="realm.socialProviders[pId+'.secret']"
-                                               ng-class="{'dirty': saveClicked}" required>
+                                               ng-class="{'dirty': postSaveProviders.indexOf(pId) > -1}" required>
                                     </td>
                                     <td>
                                         <div class="action-div"><i class="icon-question" ng-click="openHelp(pId)"></i></div>