diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 427815c1..03461417 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -96,6 +96,12 @@ async function fetchWorkflowList() {
       page: workflowPage.value,
       pageSize: workflowPageSize.value,
       query: pageState.inputSearch,
+      status:
+        statusFilter.value === 'all'
+          ? undefined
+          : statusFilter.value === 'statusACTIVE'
+            ? 'ACTIVE'
+            : 'INACTIVE',
     });
     if (res) {
       workflowData.value = res.result;
@@ -109,6 +115,7 @@ onMounted(async () => {
   await fetchWorkflowList();
 });
 
+watch(statusFilter, fetchWorkflowList);
 watch(() => pageState.inputSearch, fetchWorkflowList);
 </script>
 <template>
diff --git a/src/stores/workflow-template/index.ts b/src/stores/workflow-template/index.ts
index 2628a214..7e816fa2 100644
--- a/src/stores/workflow-template/index.ts
+++ b/src/stores/workflow-template/index.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import { WorkflowTemplate, WorkflowTemplatePayload } from './types';
+import { Status } from '../types';
 
 export const useWorkflowTemplate = defineStore('workflow-store', () => {
   const data = ref<WorkflowTemplate[]>([]);
@@ -22,6 +23,7 @@ export const useWorkflowTemplate = defineStore('workflow-store', () => {
     page?: number;
     pageSize?: number;
     query?: string;
+    status?: Status;
   }) {
     const res = await api.get<PaginationResult<WorkflowTemplate>>(
       '/workflow-template',