diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js
index 74d84d51f9..2cfd32f7b3 100644
--- a/awx/ui/static/js/helpers/JobDetail.js
+++ b/awx/ui/static/js/helpers/JobDetail.js
@@ -1170,7 +1170,12 @@ export default
                     color: '#ff5850'
                 });
             }
-
+            scope.graph_data = graph_data;
+            var total_count = 0, gd_obj;
+            for (gd_obj in graph_data) {
+                total_count += graph_data[gd_obj].value;
+            }
+            scope.total_count_for_graph = total_count;
             // Adjust the size
             width = $('#job-summary-container .job_well').width();
             height = $('#job-summary-container .job_well').height() - $('#summary-well-top-section').height() - $('#graph-section .header').outerHeight() - 15;
@@ -1187,7 +1192,7 @@ export default
                     }
                     svg = d3.select("#graph-section").append("svg").attr("width", svg_width).attr("height", svg_height);
                     svg.append("g").attr("id","completedHostsDonut");
-                    Donut3D.draw("completedHostsDonut", graph_data, Math.floor(svg_width / 2), Math.floor(svg_height / 2), Math.floor(svg_radius * 0.50), Math.floor(svg_radius * 0.25), 18, 0.4);
+                    Donut3D.draw("completedHostsDonut", graph_data, Math.floor(svg_width / 2), Math.floor(svg_height / 2) - 35, Math.floor(svg_radius * 0.50), Math.floor(svg_radius * 0.25), 18, 0.4);
                     $('#graph-section .header .legend').show();
                 }
             }
diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less
index 076ace0962..b221ce06c2 100644
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -545,6 +545,12 @@
         height: 20px;
     }
 
+    .host_summary_row {
+        margin-top: 15px;
+        margin-bottom: -15px;
+        margin-left: 0;
+    }
+
     @media (max-width: 767px) {
         #job-detail-container {
             #job-status-form {
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index e1e4b2fdf3..371b143ab3 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -257,7 +257,31 @@
                                             <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ task.status_tip }}"
                                                 data-tip-watch="task.status_tip" data-placement="top"><i class="fa icon-job-{{  task.status }}"></i></td>
                                             <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4" id="">{{ task.name }}</td>
-                                            <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
+                                            <td class="col-lg-4 col-md-3 hidden-sm hidden-xs">
+                                                <div class="status-bar">
+                                                    <div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="{{ task.successfulCount }} Hosts OK" data-placement="top" ng-style="task.successfulStyle">
+                                                        {{ task.successfulCount }}
+                                                    </div>
+                                                    <div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="{{ task.changedCount }} Hosts Changed" data-placement="top" ng-style="task.changedStyle">
+                                                        {{ task.changedCount }}
+                                                    </div>
+                                                    <div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="{{ task.skippedCount }} Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">
+                                                        {{ task.skippedCount }}
+                                                    </div>
+                                                    <div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="{{ task.failedCount }} Hosts Failed" data-placement="top" ng-style="task.failedStyle">
+                                                        {{ task.failedCount }}
+                                                    </div>
+                                                    <div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="{{ task.unreachableCount }} Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">
+                                                        {{ task.unreachableCount }}
+                                                    </div>
+                                                    <div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" aw-tool-tip="{{ task.missingCount }} Hosts Missing" data-placement="top" ng-style="task.missingStyle">
+                                                        {{ task.missingCount }}
+                                                    </div>
+                                                    <div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">
+                                                        No matching hosts
+                                                    </div>
+                                                </div>
+                                            </td>
                                         </tr>
                                         <tr ng-show="taskList.length === 0 && waiting">
                                             <td colspan="5" class="col-lg-12 loading-info">Waiting...</td>
@@ -401,10 +425,10 @@
                                         <tr ng-repeat="host in summaryList = (hosts) track by $index" id="{{ host.id }}">
                                             <td class="name col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="" ng-click="hostEventsViewer(host.id, host.name)" aw-tool-tip="View all events" data-placement="top">{{ host.name }}</a></td>
                                             <td class="col-lg-5 col-md-5 col-sm-5 col-xs-5 badge-column">
-                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="OK" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
-                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
-                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
-                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a></td>
+                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'ok')" aw-tool-tip="{{ host.ok }} Hosts Okay" data-placement="top" ng-hide="host.ok == 0"><span class="badge successful-hosts">{{ host.ok }}</span></a>
+                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'changed')" aw-tool-tip="{{ host.changed }} Hosts Changed" data-placement="top" ng-hide="host.changed == 0"><span class="badge changed-hosts">{{ host.changed }}</span></a>
+                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'unreachable')" aw-tool-tip="{{ host.unreachable }} Hosts Unreachable" data-placement="top" ng-hide="host.unreachable == 0"><span class="badge unreachable-hosts">{{ host.unreachable }}</span></a>
+                                                <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="{{ host.failed }} Hosts Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a></td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="host.id" href="" ng-click="editHost(host.id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
                                         <tr ng-show="summaryList.length === 0 && waiting">
@@ -423,9 +447,14 @@
                         </div><!-- section -->
                     </div><!-- summary-well-top-section -->
 
+                    <div class="row host_summary_row">
+                        <div class="title">Host Summary</div>
+                        <div ng-repeat="graph_data_object in graph_data">
+                            <span>{{ (graph_data_object.value/total_count_for_graph) * 100 | number : 1 }}% of hosts <span style="color: {{ graph_data_object.color }}">{{ graph_data_object.label }}</span>.<br /></span>
+                        </div>
+                    </div>
                     <div id="graph-section" class="section">
                         <div class="header">
-                            <div class="title">Host Summary</div>
                             <div class="legend" style="display: none;"><i class="fa fa-circle successful-hosts-color"></i> OK <i class="fa fa-circle changed-hosts-color"></i> Changed
                                     <i class="fa fa-circle unreachable-hosts-color"></i> Unreachable <i class="fa fa-circle failed-hosts-color"></i> Failed</div>
                         </div>