diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass
index da6def72..8dd2e71e 100644
--- a/app/styles/app/layouts/buildheader.sass
+++ b/app/styles/app/layouts/buildheader.sass
@@ -1,9 +1,3 @@
-@mixin colorTiles($color)
-  .tile-status
-    background-color: $color
-  .repo-header-title a,
-  .repo-build-status a
-    color: $color
 
 .repo
   font-size: $font-size-m
@@ -15,20 +9,6 @@
     > *
       vertical-align: middle
 
-  &.started,
-  &.created
-    @include colorTiles($start-color)
-  &.failed
-    @include colorTiles($fail-color)
-  &.errored
-    @include colorTiles($error-color)
-  &.canceled
-    @include colorTiles($cancel-color)
-  &.passed
-    @include colorTiles($pass-color)
-  &.inactive
-    @include colorTiles($cancel-color)
-
 .repo-header-title
   @extend %inline-block
   margin: 0
diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass
index 6b48f6bf..db8a327a 100644
--- a/app/styles/app/modules/tiles.sass
+++ b/app/styles/app/modules/tiles.sass
@@ -1,3 +1,10 @@
+@mixin colorTiles($color)
+  .tile-status
+    background-color: $color
+  .repo-header-title a,
+  .repo-build-status a
+    color: $color
+
 .tile
   @extend border-radius-4px
   position: relative
@@ -7,6 +14,20 @@
     margin: 0
     white-space: nowrap
 
+  &.started,
+  &.created
+    @include colorTiles($start-color)
+  &.failed
+    @include colorTiles($fail-color)
+  &.errored
+    @include colorTiles($error-color)
+  &.canceled
+    @include colorTiles($cancel-color)
+  &.passed
+    @include colorTiles($pass-color)
+  &.inactive
+    @include colorTiles($cancel-color)
+
   @media #{$medium-up}
     height: 145px
 
diff --git a/app/templates/build.hbs b/app/templates/build.hbs
index 4ba65f7f..94ebeb1b 100644
--- a/app/templates/build.hbs
+++ b/app/templates/build.hbs
@@ -1,7 +1,7 @@
 {{#if loading}}
   <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
 {{else}}
-  <section class="tile tile--pass row" {{!-- id="new-summary" --}}>
+  <section {{bind-attr class=":tile :tile--pass :row build.state"}} {{!-- id="new-summary" --}}>
     <div class="tile-status">
       <span {{bind-attr class=":icon :icon-status build.state"}}></span>
       <span {{bind-attr class=":request-kind build.eventType :icon"}}></span>
diff --git a/app/templates/builds.hbs b/app/templates/builds.hbs
index 00158c41..c97a4f76 100644
--- a/app/templates/builds.hbs
+++ b/app/templates/builds.hbs
@@ -1,7 +1,7 @@
 {{#if content.isLoaded}}
 {{!-- <table id="builds" class="list"> --}}
   {{#each build in controller itemController="buildsItem"}}
-    <div {{bind-attr class="build.color :tile :tile--small :tile--build :row"}}>
+    <div {{bind-attr class="build.state :tile :tile--small :tile--build :row"}}>
       <div class="tile-status">
         <span class="icon icon-status passed"></span>
         <span {{bind-attr class=":request-kind build.eventType :icon"}}></span>
@@ -25,7 +25,7 @@
             {{#if build.id}}
               {{#link-to "build" build.repo build}}
                 <span class="icon icon-hash"></span>
-                {{build.number}} {{build.status}}
+                {{build.number}} {{build.state}}
               {{/link-to}}
             {{/if}}
           </p>