diff --git a/app/assets/stylesheets/common/000_vars.scss b/app/assets/stylesheets/common/000_vars.scss
index 4122adde0..b0cb036f9 100644
--- a/app/assets/stylesheets/common/000_vars.scss
+++ b/app/assets/stylesheets/common/000_vars.scss
@@ -27,6 +27,9 @@ $preview_flagged_color: #F00;
 $preview_sample_warning_color:  hsl(0,  100%, 90%); // light red
 $preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow
 
+$error_color: hsl(0, 100%, 95%); // light red
+$success_color: hsl(120, 100%, 95%); // light green
+
 @mixin border-radius($val) {
   -moz-border-radius: $val;
   -webkit-border-radius: $val;
diff --git a/app/assets/stylesheets/specific/bans.scss b/app/assets/stylesheets/specific/bans.scss
new file mode 100644
index 000000000..ae58d7a56
--- /dev/null
+++ b/app/assets/stylesheets/specific/bans.scss
@@ -0,0 +1,19 @@
+@import "../common/000_vars.scss";
+
+#c-bans #a-index {
+  tr[data-expired="true"] {
+    background-color: $success_color !important;
+
+    &:hover {
+      background-color: darken($success_color, 5%) !important;
+    }
+  }
+
+  tr[data-expired="false"] {
+    background-color: $error_color !important;
+
+    &:hover {
+      background-color: darken($error_color, 5%) !important;
+    }
+  }
+}
diff --git a/app/views/bans/index.html.erb b/app/views/bans/index.html.erb
index e7808cf82..d1011f82b 100644
--- a/app/views/bans/index.html.erb
+++ b/app/views/bans/index.html.erb
@@ -1,5 +1,5 @@
-<div class="bans">
-  <div class="index">
+<div id="c-bans">
+  <div id="a-index">
     <h1>Bans</h1>
 
     <table class="striped" width="100%">
@@ -13,7 +13,7 @@
       </thead>
       <tbody>
         <% @bans.each do |ban| %>
-          <tr id="ban-<%= ban.id %>">
+          <tr id="ban-<%= ban.id %>" data-expired="<%= ban.expired? %>">
             <td><%= link_to_user(ban.user) %></td>
             <td><%= ban.expires_at %></td>
             <td><%= format_text ban.reason, :ragel => true %></td>