diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index fd0d8faf..b1fa64ad 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -157,13 +157,13 @@ span.has-danger,
 
 .m-table__row--is_vip td {
         background-color: #ffff00 !important;
-    color: #fff !important;
+    color: #414a4c !important;
 }
 
 .m-table__row--is_vip td > span,
 .m-table__row--is_vip td > span a,
 .m-table__row--is_vip td > span a i {
-        color: #fff !important;
+        color: #414a4c !important;
 }
 
 .m-table__row--is_emergency td {
diff --git a/templates/job-order/list.processing.html.twig b/templates/job-order/list.processing.html.twig
index 7de75058..ba97bb14 100644
--- a/templates/job-order/list.processing.html.twig
+++ b/templates/job-order/list.processing.html.twig
@@ -45,106 +45,111 @@
 {% endblock %}
 
 {% block scripts %}
-	<script>
-		$(function() {
-			var options = {
-				data: {
-					type: 'remote',
-					source: {
-						read: {
-							url: '{{ url('jo_proc_rows') }}',
-							method: 'POST'
-						}
-					},
-					saveState: {
-			            cookie: false,
-			            webstorage: false
-			        },
-					pageSize: 10,
-					serverPaging: true,
-					serverFiltering: true,
-					serverSorting: true
-				},
-				rows: {
-					beforeTemplate: function (row, data, index) {
-                                                // TODO: create function getRowColor that will return
-                                                // what class to display
-                                                if (data.is_vip) {
-                                                    console.log('is vip');
-                                                    $(row).addClass('m-table__row--is_vip');
-                                                }
-                                                if ($(row).hasClass('m-table__row--is_vip') == false) {
-   						    if (data.flag_advance) {
-							$(row).addClass('m-table__row--danger');
-						    }
+<script>
+$(function() {
+    var options = {
+        data: {
+            type: 'remote',
+            source: {
+                read: {
+                    url: '{{ url('jo_proc_rows') }}',
+                    method: 'POST'
+                }
+            },
+            saveState: {
+                cookie: false,
+                webstorage: false
+            },
+            pageSize: 10,
+            serverPaging: true,
+            serverFiltering: true,
+            serverSorting: true
+        },
+        rows: {
+            beforeTemplate: function (row, data, index) {
+                var attribute = getRowAttribute(data);
+                // check if we have to apply a background color for the row
+                if (attribute) {
+                    var row_class = "m-table__row--" + attribute;
+                    $(row).addClass(row_class);
+                }
+            }
+        },
+        columns: [
+        {
+            field: 'id',
+            title: 'JO Number'
+        },
+        {
+            field: 'delivery_address',
+            title: 'Customer Area'
+        },
+        {
+            field: 'type',
+            title: 'Schedule'
+        },
+        {
+            field: 'date_schedule',
+            title: 'Scheduled Date'
+        },
+        {
+            field: 'status',
+            title: 'Status'
+        },
+        {
+            field: 'processor',
+            title: 'Dispatcher'
+        },
+        {
+            field: 'Actions',
+            width: 110,
+            title: 'Actions',
+            sortable: false,
+            overflow: 'visible',
+            template: function (row, index, datatable) {
+                var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View / Edit"><i class="la la-edit"></i></a>';
 
-						    if (data.is_mobile) {
-							$(row).addClass('m-table__row--is_mobile');
-						    }
-                                                    if (data.is_emergency) {
-                                                        console.log('is emergency');
-                                                        $(row).addClass('m-table__row--is_emergency');
-                                                    }
-                                                }
-					}
-				},
-				columns: [
-					{
-						field: 'id',
-						title: 'JO Number'
-					},
-					{
-						field: 'delivery_address',
-						title: 'Customer Area'
-					},
-                    {
-                        field: 'type',
-                        title: 'Schedule'
-                    },
-					{
-						field: 'date_schedule',
-						title: 'Scheduled Date'
-					},
-					{
-						field: 'status',
-						title: 'Status'
-					},
-					{
-						field: 'processor',
-						title: 'Dispatcher'
-					},
-					{
-						field: 'Actions',
-						width: 110,
-						title: 'Actions',
-						sortable: false,
-						overflow: 'visible',
-						template: function (row, index, datatable) {
-							var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View / Edit"><i class="la la-edit"></i></a>';
+                {% if is_granted('jo_proc.unlock') %}
+                    if (row.meta.unlock_url != '') {
+                        actions += '<a href="' + row.meta.unlock_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="Unlock"><i class="fa fa-unlock"></i></a>';
+                    }
+                {% endif %}
 
-                            {% if is_granted('jo_proc.unlock') %}
-                                if (row.meta.unlock_url != '') {
-                                    actions += '<a href="' + row.meta.unlock_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="Unlock"><i class="fa fa-unlock"></i></a>';
-                                }
-                            {% endif %}
+                return actions;
+            },
+        }
+        ],
+        search: {
+            onEnter: false,
+            input: $('#data-rows-search'),
+            delay: 400
+        }
+    };
 
-							return actions;
-						},
-					}
-				],
-				search: {
-					onEnter: false,
-					input: $('#data-rows-search'),
-					delay: 400
-				}
-			};
+    var table = $("#data-rows").mDatatable(options);
 
-			var table = $("#data-rows").mDatatable(options);
+    // auto refresh table
+    setInterval(function() {
+        table.reload();
+    }, {{ table_refresh_rate }});
+});
 
-			// auto refresh table
-			setInterval(function() {
-				table.reload();
-			}, {{ table_refresh_rate }});
-		});
-	</script>
+function getRowAttribute(data) {
+    if (data.is_vip) {
+        return 'is_vip'; 
+    }
+    if (data.is_emergency) {
+        return 'is_emergency';
+    }
+    if (data.flag_advance) {
+        return 'danger';
+    }
+    if (data.is_mobile) {
+        return 'is_mobile';
+    }
+
+    return false;
+};
+
+</script>
 {% endblock %}