diff --git a/horizon/static/horizon/js/horizon.d3piechart.js b/horizon/static/horizon/js/horizon.d3piechart.js
index b27c02802..816bfd9f4 100644
--- a/horizon/static/horizon/js/horizon.d3piechart.js
+++ b/horizon/static/horizon/js/horizon.d3piechart.js
@@ -16,7 +16,10 @@ horizon.d3_pie_chart = {
   h: 100,
   r: 45,
   bkgrnd: "#F2F2F2",
-  frgrnd: "#4790B2",
+  frgrnd: "#006CCF",
+  full: "#D0342B",
+  nearlyfull: "orange",
+
   init: function() {
     var self = this;
 
@@ -56,7 +59,15 @@ horizon.d3_pie_chart = {
         .append("path")
           .attr("class","arc")
           .attr("d", arc)
-          .style("fill", self.frgrnd)
+          .style("fill", function(d){
+            if (self.data[0].percentage >= 100) {
+              return self.full;
+            } else if (self.data[0].percentage >= 80) {
+              return self.nearlyfull;
+            } else {
+              return self.frgrnd;
+            }
+          })
           .style("stroke", "#CCCCCC")
           .style("stroke-width", 1)
           .each(function(d) {return self.current = d;})
diff --git a/horizon/static/horizon/js/horizon.quota.js b/horizon/static/horizon/js/horizon.quota.js
index 3105254e1..7b78366ba 100644
--- a/horizon/static/horizon/js/horizon.quota.js
+++ b/horizon/static/horizon/js/horizon.quota.js
@@ -174,11 +174,14 @@ horizon.Quota = {
 
   // Create a new d3 bar and populate it with the current amount used
   drawUsed: function(element, used) {
-    var w= "100%";
-    var h= 20;
-    var lvl_curve= 4;
-    var bkgrnd= "#F2F2F2";
-    var frgrnd= "grey";
+    var w = "100%";
+    var h = 20;
+    var lvl_curve = 4;
+    var bkgrnd = "#F2F2F2";
+    var frgrnd = "#006CCF";
+    var full = "#D0342B";
+    var addition = "#00D300";
+    var nearlyfull = "orange";
 
     // Horizontal Bars
     var bar = d3.select("#"+element).append("svg:svg")
@@ -207,7 +210,7 @@ horizon.Quota = {
       .attr("height", h)
       .attr("rx", lvl_curve)
       .attr("ry", lvl_curve)
-      .style("fill", "lightgreen")
+      .style("fill", function () { return addition; })
 
     // used resources
     var used_bar = bar.insert("rect")
@@ -218,23 +221,33 @@ horizon.Quota = {
       .attr("height", h)
       .attr("rx", lvl_curve)
       .attr("ry", lvl_curve)
-      .style("fill", frgrnd)
+      .style("fill", function () { return frgrnd })
       .attr("d", used)
       .transition()
         .duration(500)
         .attr("width", used + "%")
+        .style("fill", function () {
+          if (used >= 100) { return full; }
+          else if (used >= 80) { return nearlyfull; }
+          else { return frgrnd; }
+        })
   },
 
   // Update the progress Bar
   update: function(element, value) {
+    var full = "#D0342B";
+    var addition = "#00D300";
     var already_used = parseInt(d3.select("#"+element).select(".usedbar").attr("d"))
     d3.select("#"+element).select(".newbar")
       .transition()
         .duration(500)
-        .attr("width", (value + already_used) + "%")
+        .attr("width", function () {
+          if ((value + already_used) >= 100) { return "100%"; }
+          else { return (value + already_used)+ "%"; }
+        })
         .style("fill", function() {
-          if (value > (100 - already_used)) { return "red" }
-          else {return "lightgreen" }
+          if (value > (100 - already_used)) { return full }
+          else {return addition }
         });
 
   },