diff --git a/awx/ui/client/features/jobs/jobsList.controller.js b/awx/ui/client/features/jobs/jobsList.controller.js
index ea57c4e9f5..d64e1870a5 100644
--- a/awx/ui/client/features/jobs/jobsList.controller.js
+++ b/awx/ui/client/features/jobs/jobsList.controller.js
@@ -118,6 +118,48 @@ function ListJobsController (
             actionText: 'DELETE'
         });
     };
+
+    vm.cancelJob = (job) => {
+        const action = () => {
+            $('#prompt-modal').modal('hide');
+            Wait('start');
+            Rest.setUrl(job.related.cancel);
+            Rest.post()
+                .then(() => {
+                    let reloadListStateParams = null;
+
+                    if ($scope.jobs.length === 1 && $state.params.job_search &&
+                    !_.isEmpty($state.params.job_search.page) &&
+                    $state.params.job_search.page !== '1') {
+                        const page = `${(parseInt(reloadListStateParams
+                            .job_search.page, 10) - 1)}`;
+                        reloadListStateParams = _.cloneDeep($state.params);
+                        reloadListStateParams.job_search.page = page;
+                    }
+
+                    $state.go('.', reloadListStateParams, { reload: true });
+                })
+                .catch(({ data, status }) => {
+                    ProcessErrors($scope, data, status, null, {
+                        hdr: strings.get('error.HEADER'),
+                        msg: strings.get('error.CALL', { path: `${job.url}`, status })
+                    });
+                })
+                .finally(() => {
+                    Wait('stop');
+                });
+        };
+
+        const deleteModalBody = `<div class="Prompt-bodyQuery">${strings.get('cancelJob.SUBMIT_REQUEST')}</div>`;
+
+        Prompt({
+            hdr: strings.get('cancelJob.HEADER'),
+            resourceName: $filter('sanitize')(job.name),
+            body: deleteModalBody,
+            action,
+            actionText: strings.get('CANCEL')
+        });
+    };
 }
 
 ListJobsController.$inject = [
diff --git a/awx/ui/client/features/jobs/jobsList.view.html b/awx/ui/client/features/jobs/jobsList.view.html
index c5d18cecbe..e9325b18f1 100644
--- a/awx/ui/client/features/jobs/jobsList.view.html
+++ b/awx/ui/client/features/jobs/jobsList.view.html
@@ -71,8 +71,17 @@
                 <at-relaunch job="job"
                     ng-show="job.summary_fields.user_capabilities.start">
                 </at-relaunch>
+                <at-row-action icon="fa-minus-circle" ng-click="vm.cancelJob(job)"
+                    ng-show="job.summary_fields.user_capabilities.start &&
+                             (job.status === 'pending' ||
+                             job.status === 'waiting' ||
+                             job.status === 'running')">
+                </at-row-action>
                 <at-row-action icon="fa-trash" ng-click="vm.deleteJob(job)"
-                    ng-show="job.summary_fields.user_capabilities.delete">
+                    ng-show="job.summary_fields.user_capabilities.delete &&
+                             !(job.status === 'pending' ||
+                             job.status === 'waiting' ||
+                             job.status === 'running')">
                 </at-row-action>
             </div>
         </at-row>
diff --git a/awx/ui/client/lib/services/base-string.service.js b/awx/ui/client/lib/services/base-string.service.js
index 11192aba29..6b5831aac9 100644
--- a/awx/ui/client/lib/services/base-string.service.js
+++ b/awx/ui/client/lib/services/base-string.service.js
@@ -76,6 +76,11 @@ function BaseStringService (namespace) {
         CONFIRM: resourceType => t.s('Are you sure you want to delete this {{ resourceType }}?', { resourceType })
     };
 
+    this.cancelJob = {
+        HEADER: t.s('Cancel'),
+        SUBMIT_REQUEST: t.s('Are you sure you want to submit the request to cancel this job?')
+    };
+
     this.error = {
         HEADER: t.s('Error!'),
         CALL: ({ path, action, status }) => t.s('Call to {{ path }} failed. {{ action }} returned status: {{ status }}.', { path, action, status }),