diff --git a/src/components/shared/AdvanceSearch.vue b/src/components/shared/AdvanceSearch.vue
index 9557fc67..5b5b33a9 100644
--- a/src/components/shared/AdvanceSearch.vue
+++ b/src/components/shared/AdvanceSearch.vue
@@ -9,7 +9,7 @@ defineProps<{
   active?: boolean;
 }>();
 
-const date = defineModel<Date[]>();
+const date = defineModel<string[]>();
 
 const dateRange = ref<string>('');
 const isDateSelect = ref(false);
@@ -64,13 +64,14 @@ function mapDateRange(val: string) {
       end = today.endOf('day');
       break;
     case 'customDateRange':
-      // Do nothing or allow manual date picking
-      return;
+      start = today.startOf('day');
+      end = today.endOf('day');
+      break;
     default:
       return;
   }
 
-  return [start.toDate(), end.toDate()];
+  return [start.toDate().toISOString(), end.toDate().toISOString()];
 }
 
 watch(
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 8cada9a1..ba335b77 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref, watch } from 'vue';
-import { QSelect, QTableProps } from 'quasar';
+import { QTableProps } from 'quasar';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
@@ -22,6 +22,7 @@ import NoData from 'src/components/NoData.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 import { useQuasar } from 'quasar';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const { t } = useI18n();
 const workflowStore = useWorkflowTemplate();
@@ -45,6 +46,7 @@ const pageState = reactive({
   addModal: false,
   viewDrawer: false,
   isDrawerEdit: true,
+  searchDate: [],
 });
 
 const fieldSelected = ref<('order' | 'name' | 'step')[]>([
@@ -68,7 +70,6 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   },
 ]);
 
-const refFilter = ref<InstanceType<typeof QSelect>>();
 const currWorkflowData = ref<WorkflowTemplate>();
 const formDataWorkflow = ref<WorkflowTemplatePayload>({
   status: 'CREATED',
@@ -282,6 +283,8 @@ async function fetchWorkflowList(mobileFetch?: boolean) {
         : statusFilter.value === 'statusACTIVE'
           ? 'ACTIVE'
           : 'INACTIVE',
+    startDate: pageState.searchDate[0] || undefined,
+    endDate: pageState.searchDate[1] || undefined,
   });
   if (res) {
     workflowData.value =
@@ -311,11 +314,14 @@ watch(
     fetchWorkflowList();
   },
 );
-watch([() => pageState.inputSearch, workflowPageSize], () => {
-  workflowData.value = [];
-  workflowPage.value = 1;
-  fetchWorkflowList();
-});
+watch(
+  [() => pageState.inputSearch, workflowPageSize, () => pageState.searchDate],
+  () => {
+    workflowData.value = [];
+    workflowPage.value = 1;
+    fetchWorkflowList();
+  },
+);
 </script>
 <template>
   <FloatingActionButton
@@ -392,26 +398,44 @@ watch([() => pageState.inputSearch, workflowPageSize], () => {
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
-              <template v-if="$q.screen.lt.md" v-slot:append>
-                <span class="row">
-                  <q-separator vertical />
-                  <q-btn
-                    icon="mdi-filter-variant"
-                    unelevated
-                    class="q-ml-sm"
-                    padding="4px"
-                    size="sm"
-                    rounded
-                    @click="refFilter?.showPopup"
+              <template v-slot:append>
+                <q-separator vertical inset class="q-mr-xs" />
+                <AdvanceSearch
+                  v-model="pageState.searchDate"
+                  :active="$q.screen.lt.md && statusFilter !== 'all'"
+                >
+                  <div
+                    v-if="$q.screen.lt.md"
+                    class="q-mt-sm text-weight-medium"
+                  >
+                    {{ $t('general.status') }}
+                  </div>
+                  <q-select
+                    v-if="$q.screen.lt.md"
+                    v-model="statusFilter"
+                    outlined
+                    dense
+                    option-value="value"
+                    option-label="label"
+                    map-options
+                    emit-value
+                    :for="'field-select-status'"
+                    :options="[
+                      { label: $t('general.all'), value: 'all' },
+                      { label: $t('general.active'), value: 'statusACTIVE' },
+                      {
+                        label: $t('general.inactive'),
+                        value: 'statusINACTIVE',
+                      },
+                    ]"
                   />
-                </span>
+                </AdvanceSearch>
               </template>
             </q-input>
 
             <div class="row col-md-5" style="white-space: nowrap">
               <q-select
-                v-show="$q.screen.gt.sm"
-                ref="refFilter"
+                v-if="$q.screen.gt.sm"
                 v-model="statusFilter"
                 outlined
                 dense
diff --git a/src/stores/workflow-template/index.ts b/src/stores/workflow-template/index.ts
index adabf939..95a6c2c4 100644
--- a/src/stores/workflow-template/index.ts
+++ b/src/stores/workflow-template/index.ts
@@ -25,6 +25,8 @@ export const useWorkflowTemplate = defineStore('workflow-store', () => {
     query?: string;
     status?: Status;
     activeOnly?: boolean;
+    startDate?: string;
+    endDate?: string;
   }) {
     const res = await api.get<PaginationResult<WorkflowTemplate>>(
       '/workflow-template',