diff --git a/awx/ui/static/js/widgets/DashboardJobs.js b/awx/ui/static/js/widgets/DashboardJobs.js
index cce96a2c1b..2731689a0c 100644
--- a/awx/ui/static/js/widgets/DashboardJobs.js
+++ b/awx/ui/static/js/widgets/DashboardJobs.js
@@ -132,7 +132,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
             max_rows = Math.floor(height / row_height);
 
             if(max_rows<5){
-                $('.dashboard-jobs-list-container').height(header+page_row+search_row+30+(5*row_height));
+                $('.dashboard-jobs-list-container').height(header+page_row+search_row+40+(5*row_height));
                 // $('.dashboard-jobs-list-container').height(500);
                 max_rows = 5;
             }
@@ -141,10 +141,6 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
         // Set container height and return the number of allowed rows
         function resizeDashboardJobsWidget() {
             setDashboardJobsHeight();
-            // completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows;
-            // completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
-            // running_scope[RunningJobsList.iterator + '_page_size'] = max_rows;
-            // running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator);
             jobs_scope[JobsList.iterator + '_page_size'] = max_rows;
             jobs_scope.changePageSize(JobsList.name, JobsList.iterator);
             scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = max_rows;
diff --git a/awx/ui/static/js/widgets/HostPieChart.js b/awx/ui/static/js/widgets/HostPieChart.js
index 2eead89ba9..df94369d0f 100644
--- a/awx/ui/static/js/widgets/HostPieChart.js
+++ b/awx/ui/static/js/widgets/HostPieChart.js
@@ -10,14 +10,17 @@
 'use strict';
 
 angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
-    .factory('HostPieChart', ['$rootScope', '$compile', '$location' , 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
-        function ($rootScope, $compile , $location, Rest, GetBasePath, ProcessErrors) {
+    .factory('HostPieChart', ['$rootScope', '$compile',
+            //'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
+        function ($rootScope, $compile){
+            //, Rest, GetBasePath, ProcessErrors) {
             return function (params) {
 
                 var scope = params.scope,
                     target = params.target,
                     dashboard = params.dashboard,
-                    html, element, url;
+                    html, element, data,
+                    canvas, context, winHeight, available_height;
 
                 html = "<div class=\"graph-container\">\n";
 
@@ -26,55 +29,42 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
                 html += "</div>\n";
 
                 html +="<div class=\"row\">\n";
-                html += "<div class=\"host-pie-chart\"><svg></svg></div>\n";
+                html += "<div class=\"host-pie-chart text-center\"><svg></svg></div>\n";
                 html += "</div>\n";
 
                 html += "</div>\n";
 
-                function exampleData() {
-                    return [
-                        {
-                            "label": "Successful",
-                            "value" : dashboard.hosts.total
-                        } ,
-                        {
-                            "label": "Failed",
-                            "value" : dashboard.hosts.failed
-                        }
-                    ];
 
-                }
 
                 element = angular.element(document.getElementById(target));
                 element.html(html);
                 $compile(element)(scope);
 
-                url = GetBasePath('dashboard')+'graphs/inventory/';
-                Rest.setUrl(url);
-                Rest.get()
-                        .success(function (data){
-                            scope.$emit('createHostPieChart', data.inventory);
+                if(dashboard.hosts.total+dashboard.hosts.failed>0){
+                    data = [
+                        {
+                            "label": "Successful",
+                            "color": "#00aa00",
+                            "value" : dashboard.hosts.total
+                        } ,
+                        {
+                            "label": "Failed",
+                            "color" : "#aa0000",
+                            "value" : dashboard.hosts.failed
+                        }
+                    ];
 
-
-                        })
-                        .error(function (data, status) {
-                            ProcessErrors(scope, data, status, null, { hdr: 'Error!',
-                                msg: 'Failed to get: ' + url + ' GET returned: ' + status });
-                        });
-
-                if (scope.removeCreateHostPieChart) {
-                    scope.removeCreateHostPieChart();
-                }
-                scope.removeCreateHostPieChart = scope.$on('createHostPieChart', function (e, data) {
-                    data = exampleData();
                     nv.addGraph(function() {
                         var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
-                        height = $('.graph-container').height()*0.85, //nv.utils.windowSize().height/5,
+                        height = $('.graph-container').height(), //nv.utils.windowSize().height/5,
                         chart = nv.models.pieChart()
                           .margin({top: 5, right: 75, bottom: 40, left: 85})
                           .x(function(d) { return d.label; })
                           .y(function(d) { return d.value; })
-                          .showLabels(true);
+                          .showLabels(true)
+                          .color(['#00aa00', '#aa0000']);
+
+                        chart.pie.pieLabelsOutside(true).labelType("percent");
 
                         d3.select(".host-pie-chart svg")
                             .datum(data)
@@ -86,7 +76,25 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
                         scope.$emit('WidgetLoaded');
                         return chart;
                     });
-                });
+                }
+                else{
+                    winHeight = $(window).height();
+                    available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
+                    $('.graph-container:eq(1)').height(available_height/2);
+                    $('.host-pie-chart svg').replaceWith('<canvas id="circlecanvas" width="100" height="100"></canvas>');
+
+                    canvas = document.getElementById("circlecanvas");
+                    context = canvas.getContext("2d");
+                    context.arc(50, 50, 50, 0, Math.PI * 2, false);
+                    //context.beginPath();
+                    context.globalAlpha = 0.4;
+                    context.fillStyle = '#A9A9A9';
+                    context.fill();
+                    context.lineWidth = 1;
+                    context.strokeStyle = '#1778c3';
+                    context.stroke();
+                    scope.$emit('WidgetLoaded');
+                }
             };
         }
     ]);
diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js
index 3d3ad49887..9161adfec3 100644
--- a/awx/ui/static/js/widgets/JobStatusGraph.js
+++ b/awx/ui/static/js/widgets/JobStatusGraph.js
@@ -171,14 +171,15 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                                     });
 
                                     nv.utils.windowResize(function(){
-
-                                        // var winWidth = $(window).width(),
-                                        var winHeight = $(window).height(),
-                                        available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
-                                        // console.log("available_height: " + available_height);
-                                        $('.graph-container').height(available_height/2);
-                                        // console.log("graph-container height: "+$('.graph-container').height());
-                                        chart.update();
+                                        if($(window).width()<500){
+                                            $('.graph-container').height(300);
+                                        }
+                                        else{
+                                            var winHeight = $(window).height(),
+                                            available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 93;
+                                            $('.graph-container').height(available_height/2);
+                                            chart.update();
+                                        }
                                     });
                                     // nv.utils.windowResize(chart.update);
 
diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less
index 46e9b422f8..8265902b22 100644
--- a/awx/ui/static/less/new-dashboard.less
+++ b/awx/ui/static/less/new-dashboard.less
@@ -47,6 +47,12 @@
     margin-bottom: 15px;
 }
 
+#replacementImg{
+  align:center;
+  width: 100px:
+  height: 100px;
+
+}
 
 #dashboard-tab-content{
   padding-top: 5px;