diff --git a/public/cluster_settings/index.html b/public/cluster_settings/index.html
index 9ea92795e53130fc75dd9e49a20fc2ab159421ed..0a8797964fe2d7492e28e162f748ec1aa960425c 100644
--- a/public/cluster_settings/index.html
+++ b/public/cluster_settings/index.html
@@ -1,6 +1,6 @@
 <h4>cluster settings</h4>
 <div class="row">
-  <div class="col-xs-12">
+  <div class="col-xs-6">
     <div class="form-group">
       <select ng-model="group" ng-init="group = 'cluster_settings/routing.html'" class="form-control">
         <option value="cluster_settings/routing.html">routing settings</option>
@@ -25,13 +25,20 @@
       </thead>
       <tr ng-repeat="(p, v) in changes track by $index" ng-show="v">
         <td>
-          <i class="fa fa-cog"> </i> {{p}} <span class="info-text"> set to value</span> {{v.value}}
-          <i class="fa fa-undo normal-action pull-right" ng-click="revert(p)"></i>
+          <ng-pending-change
+            setting="{{p}}"
+            value="{{v.value}}"
+            transient="{{v.transient}}"
+            on-revert="revert(setting)"
+            on-change-setting-persistence="changeSettingPersistence(setting)">
+          </ng-pending-change>
         </td>
       </tr>
     </table>
   </div>
-  <div class="col-lg-12 text-right">
+</div>
+<div class="row">
+  <div class="col-lg-12 text-right" ng-show="pendingChanges">
     <div class="form-group">
       <div class="btn-group">
         <button class="btn btn-success" ng-click="save()">
@@ -41,3 +48,4 @@
     </div>
   </div>
 </div>
+
diff --git a/public/cluster_settings/pending_change.html b/public/cluster_settings/pending_change.html
new file mode 100644
index 0000000000000000000000000000000000000000..90638be20a445c25adf15590bf4845c8f081ef9a
--- /dev/null
+++ b/public/cluster_settings/pending_change.html
@@ -0,0 +1,4 @@
+<i class="fa fa-cog"></i>
+{{setting}} <span class="info-text">updated to</span> {{value}} <span class="info-text">as</span> <u class="normal-action" ng-click="changeSettingPersistence({setting: setting})">{{transient === 'true' ? 'transient' : 'persistent'}}
+</u>
+<i class="fa fa-undo normal-action pull-right" ng-click="revertSetting({setting: setting})"></i>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 08da3d20c36bc53f33266b801d93bdca9da6baf0..ba2cf1aa757b49e9537a5a94fc8413f3ef352d5d 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -415,6 +415,10 @@ angular.module('cerebro').controller('ClusterSettingsController', ['$scope',
       }
     };
 
+    $scope.changeSettingPersistence = function(setting) {
+      $scope.changes[setting].transient = !$scope.changes[setting].transient;
+    };
+
     $scope.removeChange = function(property) {
       if ($scope.changes[property]) {
         $scope.pendingChanges -= 1;
@@ -453,7 +457,7 @@ angular.module('cerebro').controller('ClusterSettingsController', ['$scope',
       $scope.pendingChanges = 0;
       ClusterSettingsDataService.getClusterSettings(
         function(response) {
-          ['persistent', 'transient', 'defaults'].forEach(function(group) {
+          ['defaults', 'persistent', 'transient'].forEach(function(group) {
             angular.forEach(response[group], function(value, property) {
               $scope.settings[property] = value;
               $scope.originalSettings[property] = value;
@@ -485,6 +489,21 @@ angular.module('cerebro').factory('ClusterSettingsDataService', ['DataService',
   }
 ]);
 
+angular.module('cerebro').directive('ngPendingChange',
+  function() {
+    return {
+      scope: {
+        setting: '@',
+        value: '@',
+        transient: '@',
+        'revertSetting': '&onRevert',
+        'changeSettingPersistence': '&onChangeSettingPersistence'
+      },
+      templateUrl: './cluster_settings/pending_change.html'
+    };
+  }
+);
+
 angular.module('cerebro').controller('ConnectController', [
   '$scope', '$location', 'ConnectDataService', 'AlertService',
   function($scope, $location, ConnectDataService, AlertService) {
diff --git a/src/app/components/cluster_settings/controller.js b/src/app/components/cluster_settings/controller.js
index a2ebb45c537d80981c7de1c7390432286a049687..2e427f7d831ed858dd22a8969d935ebd0bec7050 100644
--- a/src/app/components/cluster_settings/controller.js
+++ b/src/app/components/cluster_settings/controller.js
@@ -21,6 +21,10 @@ angular.module('cerebro').controller('ClusterSettingsController', ['$scope',
       }
     };
 
+    $scope.changeSettingPersistence = function(setting) {
+      $scope.changes[setting].transient = !$scope.changes[setting].transient;
+    };
+
     $scope.removeChange = function(property) {
       if ($scope.changes[property]) {
         $scope.pendingChanges -= 1;
@@ -59,7 +63,7 @@ angular.module('cerebro').controller('ClusterSettingsController', ['$scope',
       $scope.pendingChanges = 0;
       ClusterSettingsDataService.getClusterSettings(
         function(response) {
-          ['persistent', 'transient', 'defaults'].forEach(function(group) {
+          ['defaults', 'persistent', 'transient'].forEach(function(group) {
             angular.forEach(response[group], function(value, property) {
               $scope.settings[property] = value;
               $scope.originalSettings[property] = value;
diff --git a/src/app/components/cluster_settings/pending_change.js b/src/app/components/cluster_settings/pending_change.js
new file mode 100644
index 0000000000000000000000000000000000000000..34d29000b52b7076bb289e7fb3c468233dd8898e
--- /dev/null
+++ b/src/app/components/cluster_settings/pending_change.js
@@ -0,0 +1,14 @@
+angular.module('cerebro').directive('ngPendingChange',
+  function() {
+    return {
+      scope: {
+        setting: '@',
+        value: '@',
+        transient: '@',
+        'revertSetting': '&onRevert',
+        'changeSettingPersistence': '&onChangeSettingPersistence'
+      },
+      templateUrl: './cluster_settings/pending_change.html'
+    };
+  }
+);