diff --git a/static/css/style.css b/static/css/style.css
index ff4a49a..6fc6250 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -20,4 +20,20 @@
 
 .navbar {
     border-bottom: 0.5px solid #ddd;
+}
+
+.doneJob {
+    background-color: #BCFFBC80 !important;;
+}
+
+.failureJob {
+    background-color: #FCAAAA80 !important;;
+}
+
+.canceledJob {
+    background-color: #FAFCAA80 !important;;
+}
+
+.runningJob {
+    background-color: #D9EDF7 !important;;
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 66fe666..df84c83 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,7 +13,7 @@
                     <th>Started time</th>
                     <th>End time</th>
                 </thead>
-                <tr v-for="(job, index) in jobs" :id="job.id" v-bind:class="{deleted: job.deleted}">
+                <tr v-for="(job, index) in jobs" :id="job.id" v-bind:class="[{deleted: job.deleted}, job.state + 'Job']">
                     <td><a v-if="!job.deleted" v-bind:href="'job/' + job.id">{{job.name}}</a><span v-if="job.deleted">{{job.name}} (deleted)</span> <small title="job's id">#{{job.id}} </small></td>
                     <td>{{job.state}}</td>
                     <td>{{timestampToDate(job.created_time)}}</td>