diff --git a/templates/apps.html b/templates/apps.html
index d31e1c1..03dfbc0 100644
--- a/templates/apps.html
+++ b/templates/apps.html
@@ -16,8 +16,8 @@
                     <th>Day</th>
                 </thead>
                 <tr v-for="(app, index) in apps" :id="app.id" v-bind:class="[app.job_state + 'Job']">
-                    <td>{{app.name}} <small>{{app.app_list}}</small> <span class="tag">{{app.state}}</span> <a target="_blank" v-bind:href="app.url">↪</a></td>
-                    <td><a v-bind:href="'<{ relative_path_to_root }>job/' + app.job_id">#{{app.job_id}}</a> <span class="tag">{{app.job_state}}</span></td>
+                    <td>{{app.name}} <small>{{app.app_list}}</small> <span v-bind:class="['tag', appStateTagClass(app.state)]">{{app.state}}</span> <a target="_blank" v-bind:href="app.url">↪</a></td>
+                    <td><a v-bind:href="'<{ relative_path_to_root }>job/' + app.job_id">#{{app.job_id}}</a> <span v-bind:class="['tag', jobStateTagClass(app.job_state)]">{{app.job_state}}</span></td>
                     <td>{{timestampToDate(app.created_time)}}</td>
                     <td>{{timestampToDate(app.started_time)}}</td>
                     <td>{{timestampToDate(app.end_time)}}</td>
@@ -44,6 +44,25 @@
                     if (timestamp === null) return "";
 
                     return new Date(timestamp * 1000).toLocaleString()
+                },
+                appStateTagClass: function (appState) {
+                    // this is one the only used one
+                    if (appState == "working")
+                        return {"is-success": true}
+                    // other states notworking inprogress validated
+                    if (appState == "")
+                        return {"is-danger": true}
+                    return {"is-danger": true}
+                },
+                jobStateTagClass: function (jobState) {
+                    if (jobState == "done")
+                        return {"is-success": true}
+                    if (jobState == "failure")
+                        return {"is-danger": true}
+                    if (jobState == "canceled")
+                        return {"is-warning": true}
+                    if (jobState == "running")
+                        return {"is-info": true}
                 }
             }
         })