diff --git a/ui/app/components/client-node-row.js b/ui/app/components/client-node-row.js
index 3b9a8f0c13c..07562358835 100644
--- a/ui/app/components/client-node-row.js
+++ b/ui/app/components/client-node-row.js
@@ -47,12 +47,12 @@ export default Component.extend(WithVisibilityDetection, {
 
   watch: watchRelationship('allocations'),
 
-  stateClass: computed('node.state', function() {
-    let state = this.get('node.state');
+  compositeStatusClass: computed('node.compositeStatus', function() {
+    let compositeStatus = this.get('node.compositeStatus');
 
-    if (state === 'draining') {
+    if (compositeStatus === 'draining') {
       return 'status-text is-info';
-    } else if (state === 'ineligible') {
+    } else if (compositeStatus === 'ineligible') {
       return 'status-text is-warning';
     } else {
       return '';
diff --git a/ui/app/controllers/clients/index.js b/ui/app/controllers/clients/index.js
index 20c094ce3a4..d37c23e5f2c 100644
--- a/ui/app/controllers/clients/index.js
+++ b/ui/app/controllers/clients/index.js
@@ -8,7 +8,7 @@ import Searchable from 'nomad-ui/mixins/searchable';
 import { serialize, deserializedQueryParam as selection } from 'nomad-ui/utils/qp-serialize';
 
 export default Controller.extend(
-  SortableFactory(['id', 'name', 'state', 'datacenter']),
+  SortableFactory(['id', 'name', 'compositeStatus', 'datacenter']),
   Searchable,
   {
     clientsController: controller('clients'),
diff --git a/ui/app/models/node.js b/ui/app/models/node.js
index 13dd75f69f7..c3efaff543b 100644
--- a/ui/app/models/node.js
+++ b/ui/app/models/node.js
@@ -61,11 +61,7 @@ export default Model.extend({
 
   // A status attribute that includes states not included in node status.
   // Useful for coloring and sorting nodes
-  compositeStatus: computed('status', 'isEligible', function() {
-    return this.isEligible ? this.status : 'ineligible';
-  }),
-
-  state: computed('isDraining', 'isEligible', 'status', function() {
+  compositeStatus: computed('isDraining', 'isEligible', 'status', function() {
     if (this.isDraining) {
       return 'draining';
     } else if (!this.isEligible) {
diff --git a/ui/app/styles/components/node-status-light.scss b/ui/app/styles/components/node-status-light.scss
index 9077e333a8f..50153ce2f7f 100644
--- a/ui/app/styles/components/node-status-light.scss
+++ b/ui/app/styles/components/node-status-light.scss
@@ -27,7 +27,8 @@ $size: 0.75em;
     );
   }
 
-  &.ineligible {
+  &.ineligible,
+  &.draining {
     background: $warning;
   }
 }
diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs
index bc85a7f6f11..f29105490dd 100644
--- a/ui/app/templates/clients/index.hbs
+++ b/ui/app/templates/clients/index.hbs
@@ -49,7 +49,7 @@
             <th class="is-narrow"></th>
             {{#t.sort-by prop="id"}}ID{{/t.sort-by}}
             {{#t.sort-by class="is-200px is-truncatable" prop="name"}}Name{{/t.sort-by}}
-            {{#t.sort-by prop="state"}}State{{/t.sort-by}}
+            {{#t.sort-by prop="compositeStatus"}}State{{/t.sort-by}}
             <th>Address</th>
             {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}}
             <th># Allocs</th>
diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs
index 0f5b35d4e97..bf7f5b84823 100644
--- a/ui/app/templates/components/client-node-row.hbs
+++ b/ui/app/templates/components/client-node-row.hbs
@@ -7,9 +7,9 @@
 </td>
 <td data-test-client-id>{{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}}</td>
 <td data-test-client-name class="is-200px is-truncatable" title="{{node.name}}">{{node.name}}</td>
-<td data-test-client-state>
+<td data-test-client-composite-status>
   <span class="tooltip" aria-label="{{node.status}} / {{if node.isDraining "draining" "not draining"}} / {{if node.isEligible "eligible" "not eligible"}}">
-    <span class="{{stateClass}}">{{node.state}}</span>
+    <span class="{{compositeStatusClass}}">{{node.compositeStatus}}</span>
   </span>
 </td>
 <td data-test-client-address>{{node.httpAddr}}</td>
diff --git a/ui/tests/acceptance/client-detail-test.js b/ui/tests/acceptance/client-detail-test.js
index 1be3287f38d..3fc65b40913 100644
--- a/ui/tests/acceptance/client-detail-test.js
+++ b/ui/tests/acceptance/client-detail-test.js
@@ -59,11 +59,6 @@ module('Acceptance | client detail', function(hooks) {
 
     assert.ok(ClientDetail.title.includes(node.name), 'Title includes name');
     assert.ok(ClientDetail.title.includes(node.id), 'Title includes id');
-    assert.equal(
-      ClientDetail.statusLight.objectAt(0).id,
-      node.status,
-      'Title includes status light'
-    );
   });
 
   test('/clients/:id should list additional detail for the node below the title', async function(assert) {
diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js
index cdefd2fa281..4a1fe551478 100644
--- a/ui/tests/acceptance/clients-list-test.js
+++ b/ui/tests/acceptance/clients-list-test.js
@@ -41,7 +41,11 @@ module('Acceptance | clients list', function(hooks) {
 
     assert.equal(nodeRow.id, node.id.split('-')[0], 'ID');
     assert.equal(nodeRow.name, node.name, 'Name');
-    assert.equal(nodeRow.state.text, 'draining', 'Combined status, draining, and eligbility');
+    assert.equal(
+      nodeRow.compositeStatus.text,
+      'draining',
+      'Combined status, draining, and eligbility'
+    );
     assert.equal(nodeRow.address, node.httpAddr);
     assert.equal(nodeRow.datacenter, node.datacenter, 'Datacenter');
     assert.equal(nodeRow.allocations, allocations.length, '# Allocations');
@@ -81,24 +85,24 @@ module('Acceptance | clients list', function(hooks) {
 
     await ClientsList.visit();
 
-    ClientsList.nodes[0].state.as(readyClient => {
+    ClientsList.nodes[0].compositeStatus.as(readyClient => {
       assert.equal(readyClient.text, 'ready');
       assert.ok(readyClient.isUnformatted, 'expected no status class');
       assert.equal(readyClient.tooltip, 'ready / not draining / eligible');
     });
 
-    assert.equal(ClientsList.nodes[1].state.text, 'initializing');
-    assert.equal(ClientsList.nodes[2].state.text, 'down');
+    assert.equal(ClientsList.nodes[1].compositeStatus.text, 'initializing');
+    assert.equal(ClientsList.nodes[2].compositeStatus.text, 'down');
 
-    assert.equal(ClientsList.nodes[3].state.text, 'ineligible');
-    assert.ok(ClientsList.nodes[3].state.isWarning, 'expected warning class');
+    assert.equal(ClientsList.nodes[3].compositeStatus.text, 'ineligible');
+    assert.ok(ClientsList.nodes[3].compositeStatus.isWarning, 'expected warning class');
 
-    assert.equal(ClientsList.nodes[4].state.text, 'draining');
-    assert.ok(ClientsList.nodes[4].state.isInfo, 'expected info class');
+    assert.equal(ClientsList.nodes[4].compositeStatus.text, 'draining');
+    assert.ok(ClientsList.nodes[4].compositeStatus.isInfo, 'expected info class');
 
-    await ClientsList.sortBy('state');
+    await ClientsList.sortBy('compositeStatus');
 
-    assert.deepEqual(ClientsList.nodes.mapBy('state.text'), [
+    assert.deepEqual(ClientsList.nodes.mapBy('compositeStatus.text'), [
       'ready',
       'initializing',
       'ineligible',
@@ -115,7 +119,7 @@ module('Acceptance | clients list', function(hooks) {
 
     await settled();
 
-    assert.deepEqual(ClientsList.nodes.mapBy('state.text'), [
+    assert.deepEqual(ClientsList.nodes.mapBy('compositeStatus.text'), [
       'initializing',
       'ineligible',
       'ineligible',
diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js
index 636353c678b..7a9c9b5421b 100644
--- a/ui/tests/pages/clients/list.js
+++ b/ui/tests/pages/clients/list.js
@@ -34,8 +34,8 @@ export default create({
     id: text('[data-test-client-id]'),
     name: text('[data-test-client-name]'),
 
-    state: {
-      scope: '[data-test-client-state]',
+    compositeStatus: {
+      scope: '[data-test-client-composite-status]',
 
       tooltip: attribute('aria-label', '.tooltip'),