diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
new file mode 100644
index 00000000..0226987f
--- /dev/null
+++ b/src/pages/09_task-order/MainPage.vue
@@ -0,0 +1,242 @@
+<script lang="ts" setup>
+// NOTE: Library
+import { computed, onMounted, reactive } from 'vue';
+import { storeToRefs } from 'pinia';
+
+// NOTE:  Components
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import NoData from 'src/components/NoData.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+
+// NOTE: Stores & Type
+import { useNavigator } from 'src/stores/navigator';
+import useFlowStore from 'src/stores/flow';
+
+const navigatorStore = useNavigator();
+const flowStore = useFlowStore();
+
+// NOTE: Variable
+const pageState = reactive({
+  // TODO: replace state
+  hideStat: false,
+  statusFilter: 'None',
+  inputSearch: '',
+  fieldSelected: [],
+  gridView: false,
+  total: 0,
+});
+
+const fieldSelectedOption = computed(() => {
+  return [];
+  // return column.map((v) => ({
+  //   label: v.label,
+  //   value: v.name,
+  // }));
+});
+
+// NOTE: Function
+onMounted(async () => {
+  navigatorStore.current.title = 'taskOrder.title';
+  navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
+});
+</script>
+<template>
+  <div class="column full-height no-wrap">
+    <!-- SEC: stat -->
+    <section class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('general.dataSum') }}
+      <q-badge
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        <!-- TODO: replace stat -->
+        0
+        <!-- {{ Object.values(stats).reduce((a, c) => a + c, 0) }} -->
+      </q-badge>
+      <q-btn
+        class="q-ml-sm"
+        icon="mdi-pin-outline"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="pageState.hideStat = !pageState.hideStat"
+        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
+    </section>
+
+    <transition name="slide">
+      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <!-- TODO: replace count -->
+          <StatCardComponent
+            labelI18n
+            :branch="[
+              {
+                icon: 'icon-park-outline:loading-one',
+                count: 0,
+                label: 'requestList.status.Pending',
+                color: 'orange',
+              },
+              {
+                icon: 'mdi-timer-sand',
+                count: 0,
+                label: 'requestList.status.InProgress',
+                color: 'blue',
+              },
+              {
+                icon: 'mdi-check-decagram-outline',
+                count: 0,
+                label: 'requestList.status.Completed',
+                color: 'light-green',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <section class="col surface-1 rounded bordered overflow-hidden">
+      <div class="column full-height">
+        <!-- SEC: header content -->
+        <header
+          class="row surface-3 justify-between full-width items-center bordered-b"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md justify-between full-width">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              :label="$t('general.search')"
+              class="q-mr-md col-12 col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </q-input>
+
+            <div
+              class="row col-12 col-md-5 justify-end"
+              :class="{ 'q-pt-xs': $q.screen.lt.md }"
+              style="white-space: nowrap"
+            >
+              <!-- TODO: replace status -->
+              <q-select
+                v-model="pageState.statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                :class="{ 'offset-md-5': pageState.gridView }"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  {
+                    label: $t('general.all'),
+                    value: 'None',
+                  },
+                  {
+                    label: $t('requestList.status.Pending'),
+                    value: '',
+                  },
+                  {
+                    label: $t('requestList.status.InProgress'),
+                    value: '',
+                  },
+                  {
+                    label: $t('requestList.status.Completed'),
+                    value: '',
+                  },
+                ]"
+              />
+              <!-- TODO: select -->
+              <!-- fieldSelectedOption.map((v) => ({
+                ...v,
+                label: v.label && $t(v.label),
+              })) -->
+              <q-select
+                v-if="!pageState.gridView"
+                id="select-field"
+                for="select-field"
+                class="col q-ml-sm"
+                :options="[]"
+                :display-value="$t('general.displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                v-model="pageState.fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="pageState.gridView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
+              >
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : pageState.gridView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : pageState.gridView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+        </header>
+      </div>
+    </section>
+  </div>
+</template>
+<style scoped></style>