diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 8b942bf6..4f454ae1 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -422,7 +422,21 @@ watch(() => pageState.inputSearch, fetchWorkflowList);
             </template>
 
             <template #body="props">
-              <q-tr>
+              <q-tr
+                :class="{
+                  'app-text-muted': props.row.status === 'INACTIVE',
+                  'status-active': props.row.status !== 'INACTIVE',
+                  'status-inactive': props.row.status === 'INACTIVE',
+                }"
+                :props="props"
+                :style="
+                  props.rowIndex % 2 !== 0
+                    ? $q.dark.isActive
+                      ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                      : `background: #f9fafc`
+                    : ''
+                "
+              >
                 <q-td class="text-center">{{ props.rowIndex + 1 }}</q-td>
                 <q-td>{{ props.row.name }}</q-td>
                 <q-td class="text-right">{{ props.row.step.length }}</q-td>