diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js b/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js
index aafb17419c..b20e794017 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js
@@ -1649,7 +1649,8 @@ module.directive('kcProviderConfig', function ($modal) {
         scope: {
             config: '=',
             properties: '=',
-            realm: '='
+            realm: '=',
+            clients: '='
         },
         restrict: 'E',
         replace: true,
diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/federated-mapper-detail.html b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/federated-mapper-detail.html
index c837139af0..aa17065996 100644
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/federated-mapper-detail.html
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/federated-mapper-detail.html
@@ -45,28 +45,8 @@
                 </div>
                 <kc-tooltip>{{mapperType.helpText}}</kc-tooltip>
             </div>
-            <div data-ng-repeat="option in mapperType.properties" class="form-group">
-                <label class="col-md-2 control-label">{{option.label}}</label>
-
-                <div class="col-sm-4" data-ng-show="option.type == 'String'">
-                    <input class="form-control" type="text" data-ng-model="mapper.config[ option.name ]">
-                </div>
-                <div class="col-sm-4" data-ng-show="option.type == 'boolean'">
-                    <input ng-model="mapper.config[ option.name ]" value="'true'" name="option.name" id="option.name" onoffswitchmodel />
-                </div>
-                <div class="col-sm-4" data-ng-show="option.type == 'List'">
-                    <select ng-model="mapper.config[ option.name ]" ng-options="data for data in option.defaultValue">
-                        <option value="" selected> Select one... </option>
-                    </select>
-                </div>
-                <div class="col-sm-4" data-ng-show="option.type == 'ClientList'">
-                    <select ng-model="mapper.config[ option.name ]" ng-options="client.clientId as client.clientId for client in clients">
-                        <option value="" selected> Select one... </option>
-                    </select>
-                </div>
-                <kc-tooltip>{{option.helpText}}</kc-tooltip>
-            </div>
 
+            <kc-provider-config config="mapper.config" properties="mapperType.properties" realm="realm" clients="clients"></kc-provider-config>
         </fieldset>
         <div class="pull-right form-actions" data-ng-show="create && access.manageRealm">
             <button kc-cancel data-ng-click="cancel()">Cancel</button>
diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html b/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html
index 0dd4f950ba..9268939d61 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html
@@ -1,7 +1,7 @@
 <div data-ng-repeat="option in properties" class="form-group">
     <label class="col-md-2 control-label">{{option.label}}</label>
 
-    <div class="col-sm-6" data-ng-hide="option.type == 'boolean' || option.type == 'List' || option.type == 'Role'">
+    <div class="col-sm-6" data-ng-hide="option.type == 'boolean' || option.type == 'List' || option.type == 'Role' || option.type == 'ClientList'">
         <input class="form-control" type="text" data-ng-model="config[ option.name ]" >
     </div>
     <div class="col-sm-6" data-ng-show="option.type == 'boolean'">
@@ -18,6 +18,11 @@
     <div class="col-sm-4" data-ng-show="option.type == 'Role'">
         <button type="submit" data-ng-click="openRoleSelector(option.name)" class="btn btn-default" tooltip="Enter role in the textbox to the left, or click this button to browse and select the role you want">Select Role</button>
     </div>
+    <div class="col-sm-4" data-ng-show="option.type == 'ClientList'">
+        <select ng-model="config[ option.name ]" ng-options="client.clientId as client.clientId for client in clients">
+            <option value="" selected> Select one... </option>
+        </select>
+    </div>
 
     <kc-tooltip>{{option.helpText}}</kc-tooltip>
 </div>