diff --git a/core/src/main/resources/spark/ui/static/webui.css b/core/src/main/resources/spark/ui/static/webui.css
index f7537bb7661919e20f66298273471d1629feb0a3..d9187901876fbb83fce3aa9d1ebaf0b620b3d40c 100644
--- a/core/src/main/resources/spark/ui/static/webui.css
+++ b/core/src/main/resources/spark/ui/static/webui.css
@@ -47,3 +47,28 @@
   padding-top: 7px;
   padding-left: 4px;
 }
+
+.progress-completed .bar,
+.progress .bar-completed {
+  background-color: #7ccde5;
+  background-image: -moz-linear-gradient(top, #7ccde5, #75c3d9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7ccde5), to(#75c3d9));
+  background-image: -webkit-linear-gradient(top, #7ccde5, #75c3d9);
+  background-image: -o-linear-gradient(top, #7ccde5, #75c3d9);
+  background-image: linear-gradient(to bottom, #7ccde5, #75c3d9);
+  background-repeat: repeat-x;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff7ccde5', endColorstr='#ff75c3d9', GradientType=0);
+}
+
+.progress-running .bar,
+.progress .bar-running {
+  background-color: #cdecf5;
+  background-image: -moz-linear-gradient(top, #cdecf5, #c2e4ee);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cdecf5), to(#c2e4ee));
+  background-image: -webkit-linear-gradient(top, #cdecf5, #c2e4ee);
+  background-image: -o-linear-gradient(top, #cdecf5, #c2e4ee);
+  background-image: linear-gradient(to bottom, #cdecf5, #c2e4ee);
+  background-repeat: repeat-x;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffcdecf5', endColorstr='#ffc2e4ee', GradientType=0);
+}
+
diff --git a/core/src/main/scala/spark/ui/jobs/StageTable.scala b/core/src/main/scala/spark/ui/jobs/StageTable.scala
index 40514b9f4066a66d9917ee946c74cf1c2ee0d272..666437b5567ffdbfdee8bdccf8e22888610729d5 100644
--- a/core/src/main/scala/spark/ui/jobs/StageTable.scala
+++ b/core/src/main/scala/spark/ui/jobs/StageTable.scala
@@ -62,8 +62,8 @@ private[spark] class StageTable(val stages: Seq[Stage], val parent: JobProgressU
       <span style="text-align:center; position:absolute; width:100%;">
         {completed}/{total} {failed}
       </span>
-      <div class="bar" style={completeWidth}></div>
-      <div class="bar bar-info" style={startWidth}></div>
+      <div class="bar bar-completed" style={completeWidth}></div>
+      <div class="bar bar-running" style={startWidth}></div>
     </div>
   }