diff --git a/static/css/audience_display.css b/static/css/audience_display.css
index 1f0300e..e9048d7 100644
--- a/static/css/audience_display.css
+++ b/static/css/audience_display.css
@@ -250,10 +250,10 @@ html {
   font-family: "FuturaLT";
   font-size: 32px;
 }
-.final-teams span {
+.final-teams>span {
   margin: 0 10px;
 }
-.final-teams span sup {
+.final-teams>span>sup {
   margin-left: 3px;
   font-size: 18px;
   vertical-align: super;
@@ -271,6 +271,12 @@ html {
 #rightFinalTeams {
   padding-left: 5%;
 }
+.rank-up {
+  color: #0c3;
+}
+.rank-down {
+  color: #f33;
+}
 .final-breakdown {
   float: left;
   width: 33%;
diff --git a/static/js/audience_display.js b/static/js/audience_display.js
index 5894060..576d578 100644
--- a/static/js/audience_display.js
+++ b/static/js/audience_display.js
@@ -457,9 +457,9 @@ var getRankingText = function(teamId, rankings) {
   }
   var arrow = "";
   if (ranking.Rank > ranking.PreviousRank && ranking.PreviousRank > 0) {
-    arrow = "⬇";
+    arrow = "<span class='rank-down'>&#9660;</span>";
   } else if (ranking.Rank < ranking.PreviousRank) {
-    arrow = "&#11014;";
+    arrow = "<span class='rank-up'>&#9650;</span>";
   }
   return "<sup>" + ranking.Rank + arrow + "</sup>";
 };