diff --git a/ui/app/controllers/allocations/allocation/index.js b/ui/app/controllers/allocations/allocation/index.js
index 7ccfd9b91..662aac437 100644
--- a/ui/app/controllers/allocations/allocation/index.js
+++ b/ui/app/controllers/allocations/allocation/index.js
@@ -1,6 +1,8 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { task } from 'ember-concurrency';
 import Sortable from 'nomad-ui/mixins/sortable';
 import { lazyClick } from 'nomad-ui/helpers/lazy-click';
 
@@ -21,6 +23,40 @@ export default Controller.extend(Sortable, {
   // Set in the route
   preempter: null,
 
+  error: computed(() => {
+    // { title, description }
+    return null;
+  }),
+
+  onDismiss() {
+    this.set('error', null);
+  },
+
+  stopAllocation: task(function*() {
+    try {
+      yield this.model.stop();
+      // Eagerly update the allocation clientStatus to avoid flickering
+      this.model.set('clientStatus', 'complete');
+    } catch (err) {
+      this.set('error', {
+        title: 'Could Not Stop Allocation',
+        description: 'Your ACL token does not grant allocation lifecyle permissions.',
+      });
+    }
+  }),
+
+  restartAllocation: task(function*() {
+    try {
+      yield this.model.restart();
+    } catch (err) {
+      console.log('oops', err);
+      this.set('error', {
+        title: 'Could Not Stop Allocation',
+        description: 'Your ACL token does not grant allocation lifecyle permissions.',
+      });
+    }
+  }),
+
   actions: {
     gotoTask(allocation, task) {
       this.transitionToRoute('allocations.allocation.task', task);
diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs
index 09df050e2..921213bc0 100644
--- a/ui/app/templates/allocations/allocation/index.hbs
+++ b/ui/app/templates/allocations/allocation/index.hbs
@@ -1,8 +1,42 @@
 <section class="section">
-  <h1 data-test-title class="title">
+  {{#if error}}
+    <div class="notification is-danger">
+      <div class="columns">
+        <div class="column">
+          <h3 data-test-error-title class="title is-4">{{error.title}}</h3>
+          <p data-test-error-body>{{error.description}}</p>
+        </div>
+        <div class="column is-centered is-minimum">
+          <button data-test-error-close class="button is-danger" onclick={{action onDismiss}}>Okay</button>
+        </div>
+      </div>
+    </div>
+  {{/if}}
+
+  <h1 data-test-title class="title with-headroom">
     Allocation {{model.name}}
     <span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span>
     <span class="tag is-hollow is-small no-text-transform">{{model.id}}</span>
+    {{#if model.isRunning}}
+      {{two-step-button
+        data-test-stop
+        idleText="Stop"
+        cancelText="Cancel"
+        confirmText="Yes, Stop"
+        confirmationMessage="Are you sure? This will reschedule the allocation on a different client."
+        awaitingConfirmation=stopAllocation.isRunning
+        disabled=(or stopAllocation.isRunning restartAllocation.isRunning)
+        onConfirm=(perform stopAllocation)}}
+      {{two-step-button
+        data-test-restart
+        idleText="Restart"
+        cancelText="Cancel"
+        confirmText="Yes, Restart"
+        confirmationMessage="Are you sure? This will restart the allocation in-place."
+        awaitingConfirmation=restartAllocation.isRunning
+        disabled=(or stopAllocation.isRunning restartAllocation.isRunning)
+        onConfirm=(perform restartAllocation)}}
+    {{/if}}
   </h1>
 
   <div class="boxed-section is-small">