diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index b5d29649..2343b38a 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -897,6 +897,11 @@ export default {
     sendTaskOrder: 'Send Task Order',
     payment: 'Payment',
     goodReceipt: 'Good Receipt',
+
+    issueBranch: 'Issue Branch',
+    issueDate: 'Issue Date',
+    madeBy: 'Made By',
+    contactName: 'Contact Name',
   },
 
   dialog: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index d9ea2c97..6fafc922 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -888,6 +888,11 @@ export default {
     sendTaskOrder: 'ส่งใบสั่งงาน',
     payment: 'ขำระเงิน',
     goodReceipt: 'ใบรับสินค้า',
+
+    issueBranch: 'สาขาที่ออก',
+    issueDate: 'วันที่ออก',
+    madeBy: 'ผู้ที่ทำรายการ',
+    contactName: 'ชื่อผู้ติดต่อ',
   },
 
   dialog: {
diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
index 4d41368d..542745f4 100644
--- a/src/pages/09_task-order/MainPage.vue
+++ b/src/pages/09_task-order/MainPage.vue
@@ -12,29 +12,27 @@ import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'src/stores/flow';
-import { pageTabs } from './constants';
+import { pageTabs, column } from './constants';
 
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 
 // NOTE: Variable
 const pageState = reactive({
-  // TODO: replace state
   currentTab: 'title',
   hideStat: false,
   statusFilter: 'None',
   inputSearch: '',
-  fieldSelected: [],
+  fieldSelected: [...column.map((v) => v.name)],
   gridView: false,
   total: 0,
 });
 
 const fieldSelectedOption = computed(() => {
-  return [];
-  // return column.map((v) => ({
-  //   label: v.label,
-  //   value: v.name,
-  // }));
+  return column.map((v) => ({
+    label: v.label,
+    value: v.name,
+  }));
 });
 
 // NOTE: Function
@@ -180,13 +178,17 @@ onMounted(async () => {
                   },
                 ]"
               />
-              <!-- TODO: select -->
               <q-select
                 v-if="!pageState.gridView"
                 id="select-field"
                 for="select-field"
                 class="col q-ml-sm"
-                :options="[]"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label: v.label && $t(v.label),
+                  }))
+                "
                 :display-value="$t('general.displayField')"
                 :hide-dropdown-icon="$q.screen.lt.sm"
                 v-model="pageState.fieldSelected"
@@ -297,6 +299,7 @@ onMounted(async () => {
           class="col surface-2 full-width scroll q-pa-md"
         ></article>
 
+        <!-- TODO: footer -->
         <!-- SEC: footer content -->
         <!-- <footer
           class="row justify-between items-center q-px-md q-py-sm surface-2"
diff --git a/src/pages/09_task-order/constants.ts b/src/pages/09_task-order/constants.ts
index 07e2329e..31ae6404 100644
--- a/src/pages/09_task-order/constants.ts
+++ b/src/pages/09_task-order/constants.ts
@@ -7,3 +7,60 @@ export const pageTabs = [
   { label: 'payment', value: 'payment' },
   { label: 'goodReceipt', value: 'goodReceipt' },
 ];
+
+export const column = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'no',
+  },
+  {
+    name: 'taskOrder',
+    align: 'left',
+    label: 'taskOrder.title',
+    field: 'taskOrder',
+  },
+  {
+    name: 'issueBranch',
+    align: 'left',
+    label: 'taskOrder.issueBranch',
+    field: 'issueBranch',
+  },
+  {
+    name: 'agencies',
+    align: 'left',
+    label: 'general.agencies',
+    field: 'agencies',
+  },
+  {
+    name: 'issueDate',
+    align: 'left',
+    label: 'taskOrder.issueDate',
+    field: 'issueDate',
+  },
+  {
+    name: 'madeBy',
+    align: 'left',
+    label: 'taskOrder.madeBy',
+    field: 'madeBy',
+  },
+  {
+    name: 'telephone',
+    align: 'left',
+    label: 'general.telephone',
+    field: 'telephone',
+  },
+  {
+    name: 'contactName',
+    align: 'left',
+    label: 'taskOrder.contactName',
+    field: 'contactName',
+  },
+  {
+    name: 'status',
+    align: 'left',
+    label: 'general.status',
+    field: 'status',
+  },
+];