diff --git a/client/app/scripts/components/node-details/node-details-controls.js b/client/app/scripts/components/node-details/node-details-controls.js
index d3028e74d..703d5f79e 100644
--- a/client/app/scripts/components/node-details/node-details-controls.js
+++ b/client/app/scripts/components/node-details/node-details-controls.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'lodash';
 
 import NodeDetailsControlButton from './node-details-control-button';
 
@@ -17,7 +18,7 @@ export default function NodeDetailsControls({controls, error, nodeId, pending})
         <span className="node-details-controls-error-messages">{error}</span>
       </div>}
       <span className="node-details-controls-buttons">
-        {controls && controls.map(control => <NodeDetailsControlButton
+        {_.sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
           nodeId={nodeId} control={control} pending={pending} key={control.id} />)}
       </span>
       {controls && <span title="Applying..." className={spinnerClassName}></span>}