diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/supervisor-table-action-dialog/__snapshots__/supervisor-table-action-dialog.spec.tsx.snap
old mode 100644
new mode 100755
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index 438fc9dc529..90378326bc1 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -92,7 +92,7 @@ export function booleanCustomTableFilter(filter: Filter, value: any): boolean {
     return true;
   }
   if (value === null) return false;
-  const haystack = String(value.toLowerCase());
+  const haystack = String(value).toLowerCase();
   const needleAndMode: NeedleAndMode = getNeedleAndMode(filter.value.toLowerCase());
   const needle = needleAndMode.needle;
   if (needleAndMode.mode === 'exact') {
diff --git a/web-console/src/views/datasource-view/__snapshots__/datasource-view.spec.tsx.snap b/web-console/src/views/datasource-view/__snapshots__/datasource-view.spec.tsx.snap
old mode 100644
new mode 100755
diff --git a/web-console/src/views/lookups-view/__snapshots__/lookups-view.spec.tsx.snap b/web-console/src/views/lookups-view/__snapshots__/lookups-view.spec.tsx.snap
old mode 100644
new mode 100755
diff --git a/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap b/web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap
old mode 100644
new mode 100755
diff --git a/web-console/src/views/servers-view/__snapshots__/servers-view.spec.tsx.snap b/web-console/src/views/servers-view/__snapshots__/servers-view.spec.tsx.snap
old mode 100644
new mode 100755
diff --git a/web-console/src/views/sql-view/__snapshots__/sql-view.spec.tsx.snap b/web-console/src/views/sql-view/__snapshots__/sql-view.spec.tsx.snap
old mode 100644
new mode 100755
diff --git a/web-console/src/views/task-view/__snapshots__/tasks-view.spec.tsx.snap b/web-console/src/views/task-view/__snapshots__/tasks-view.spec.tsx.snap
index a14c6564be0..a01963f57ca 100644
--- a/web-console/src/views/task-view/__snapshots__/tasks-view.spec.tsx.snap
+++ b/web-console/src/views/task-view/__snapshots__/tasks-view.spec.tsx.snap
@@ -126,6 +126,7 @@ exports[`tasks view matches snapshot 1`] = `
               "accessor": [Function],
               "id": "status",
               "show": true,
+              "width": 300,
             },
             Object {
               "Cell": [Function],
diff --git a/web-console/src/views/task-view/tasks-view.tsx b/web-console/src/views/task-view/tasks-view.tsx
index d8fa4eb0861..768a6861ca7 100644
--- a/web-console/src/views/task-view/tasks-view.tsx
+++ b/web-console/src/views/task-view/tasks-view.tsx
@@ -109,6 +109,18 @@ function statusToColor(status: string): string {
   }
 }
 
+function stateToColor(status: string): string {
+  switch (status) {
+    case 'UNHEALTHY_SUPERVISOR': return '#d5100a';
+    case 'UNHEALTHY_TASKS': return '#d5100a';
+    case 'PENDING': return '#ffbf00';
+    case `SUSPENDED`: return '#ffbf00';
+    case 'STOPPING': return '#d5100a';
+    case 'RUNNING': return '#2167d5';
+    default: return '#0a1500';
+  }
+}
+
 export class TasksView extends React.PureComponent<TasksViewProps, TasksViewState> {
   private supervisorQueryManager: QueryManager<string, SupervisorQueryResultRow[]>;
   private taskQueryManager: QueryManager<string, TaskQueryResultRow[]>;
@@ -464,12 +476,13 @@ ORDER BY "rank" DESC, "created_time" DESC`);
           {
             Header: 'Status',
             id: 'status',
-            accessor: (row) => row.spec.suspended ? 'Suspended' : 'Running',
-            Cell: row => {
-              const value = row.value;
+            width: 300,
+            accessor: (row) => { return row.detailedState; },
+            Cell: (row) => {
+              const value = row.original.detailedState;
               return <span>
                 <span
-                  style={{ color: value === 'Suspended' ? '#d58512' : '#2167d5' }}
+                  style={{ color: stateToColor(row.original.state)}}
                 >
                   &#x25cf;&nbsp;
                 </span>