diff --git a/ui/app/controllers/clients/client.js b/ui/app/controllers/clients/client.js
index 9044fd1f7..0e5f9c401 100644
--- a/ui/app/controllers/clients/client.js
+++ b/ui/app/controllers/clients/client.js
@@ -1,8 +1,10 @@
 import { alias } from '@ember/object/computed';
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
+import { task } from 'ember-concurrency';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
+import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
 
 export default Controller.extend(Sortable, Searchable, {
   queryParams: {
@@ -36,6 +38,8 @@ export default Controller.extend(Sortable, Searchable, {
   listToSearch: alias('listSorted'),
   sortedAllocations: alias('listSearched'),
 
+  eligibilityError: null,
+
   preemptions: computed('model.allocations.@each.wasPreempted', function() {
     return this.model.allocations.filterBy('wasPreempted');
   }),
@@ -50,6 +54,15 @@ export default Controller.extend(Sortable, Searchable, {
     return this.get('model.drivers').sortBy('name');
   }),
 
+  setEligibility: task(function*(value) {
+    try {
+      yield value ? this.model.setEligible() : this.model.setIneligible();
+    } catch (err) {
+      const error = messageFromAdapterError(err) || 'Could not set eligibility';
+      this.set('eligibilityError', error);
+    }
+  }).drop(),
+
   actions: {
     gotoAllocation(allocation) {
       this.transitionToRoute('allocations.allocation', allocation);
diff --git a/ui/app/models/node.js b/ui/app/models/node.js
index 919121f30..753e620fa 100644
--- a/ui/app/models/node.js
+++ b/ui/app/models/node.js
@@ -74,11 +74,15 @@ export default Model.extend({
 
   setEligible() {
     if (this.isEligible) return RSVP.resolve();
+    // Optimistically update schedulingEligibility for immediate feedback
+    this.set('schedulingEligibility', 'eligible');
     return this.store.adapterFor('node').setEligible(this);
   },
 
   setIneligible() {
     if (!this.isEligible) return RSVP.resolve();
+    // Optimistically update schedulingEligibility for immediate feedback
+    this.set('schedulingEligibility', 'ineligible');
     return this.store.adapterFor('node').setIneligible(this);
   },
 
diff --git a/ui/app/templates/clients/client.hbs b/ui/app/templates/clients/client.hbs
index 0413cf1d0..e1c1833bc 100644
--- a/ui/app/templates/clients/client.hbs
+++ b/ui/app/templates/clients/client.hbs
@@ -1,5 +1,11 @@
 {{title "Client " (or model.name model.shortId)}}
 <section class="section">
+  {{#if eligibilityError}}
+    <div data-test-eiligibility-error class="notification is-danger">
+      <h3 class="title is-4" data-test-eiligibility-error-title>Eligibility Error</h3>
+      <p data-test-eligibility-error-message>{{eligibilityError}}</p>
+    </div>
+  {{/if}}
   <div class="toolbar">
     <div class="toolbar-item is-top-aligned is-minimum">
       <span class="title">
@@ -12,8 +18,13 @@
       </h1>
       <p>
         <label>
-          <input type="checkbox" /> Eligible
-          <span class="tooltip" aria-label="Only eligible nodes can receive allocations">
+          <input
+            type="checkbox"
+            checked={{model.isEligible}}
+            disabled={{setEligibility.isRunning}}
+            onchange={{perform setEligibility (not model.isEligible)}}
+          /> Eligible
+          <span class="tooltip" aria-label="Only eligible clients can receive allocations">
             {{x-icon "info-circle-outline" class="is-faded"}}
           </span>
         </label>