diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 06a21d9c..ea4066d6 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -194,6 +194,7 @@ export default {
       personnel: 'บุคลากร',
       productService: 'สินค้าและบริการ',
       workflow: 'ขั้นตอนการทำงาน',
+      property: 'คุณสมบัติ',
       customer: 'ลูกค้า',
       mainData: 'ข้อมูลหลัก',
       agencies: 'หน่วยงาน',
@@ -1431,4 +1432,9 @@ export default {
     11: 'พฤศจิกายน',
     12: 'ธันวาคม',
   },
+
+  property: {
+    title: 'คุณสมบัติ',
+    caption: 'จัดการคุณสมบัติ',
+  },
 };
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 5e07ca3a..6d9f0e06 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -120,6 +120,7 @@ onMounted(async () => {
           ),
         },
         { label: 'workflow', route: '/workflow' },
+        { label: 'property', route: '/property' },
         { label: 'productService', route: '/product-service' },
         { label: 'customer', route: '/customer-management' },
         { label: 'agencies', route: '/agencies-management' },
diff --git a/src/pages/04_property-managment/MainPage.vue b/src/pages/04_property-managment/MainPage.vue
index aab4caa5..60c0c329 100644
--- a/src/pages/04_property-managment/MainPage.vue
+++ b/src/pages/04_property-managment/MainPage.vue
@@ -1,3 +1,510 @@
-<script lang="ts" setup></script>
-<template></template>
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { onMounted, reactive, ref } from 'vue';
+import { QSelect } from 'quasar';
+import { useNavigator } from 'src/stores/navigator';
+import { useProperty } from 'src/stores/property';
+
+const navigatorStore = useNavigator();
+const propertyStore = useProperty();
+const {
+  data: propertyData,
+  page: propertyPage,
+  pageSize: propertyPageSize,
+  pageMax: propertyPageMax,
+} = storeToRefs(propertyStore);
+
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const refFilter = ref<InstanceType<typeof QSelect>>();
+const fieldSelected = ref<('order' | 'name' | 'step')[]>([
+  'order',
+  'name',
+  'step',
+]);
+const fieldSelectedOption = ref<{ label: string; value: string }[]>([
+  {
+    label: 'general.order',
+    value: 'order',
+  },
+
+  {
+    label: 'general.name',
+    value: 'name',
+  },
+  {
+    label: 'flow.processStep',
+    value: 'step',
+  },
+]);
+
+const pageState = reactive({
+  hideStat: false,
+  inputSearch: '',
+  fieldSelected: [],
+  gridView: false,
+  total: 0,
+
+  addModal: false,
+  viewDrawer: false,
+  isDrawerEdit: true,
+});
+
+onMounted(async () => {
+  navigatorStore.current.title = 'property.title';
+  navigatorStore.current.path = [{ text: 'property.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));
+        "
+      >
+        {{ pageState.total }}
+      </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">
+          <StatCardComponent
+            labelI18n
+            :branch="[
+              {
+                icon: 'mdi-cogs',
+                count: pageState.total,
+                label: 'flow.title',
+                color: 'gray',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <!-- SEC: header content -->
+    <section class="col surface-1 rounded bordered overflow-hidden">
+      <div class="column full-height no-wrap">
+        <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="col col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <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"
+                  />
+                </span>
+              </template>
+            </q-input>
+
+            <div class="row col-md-5" style="white-space: nowrap">
+              <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
+                v-model="statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  { label: $t('general.all'), value: 'all' },
+                  { label: $t('general.active'), value: 'statusACTIVE' },
+                  { label: $t('general.inactive'), value: 'statusINACTIVE' },
+                ]"
+              />
+              <q-select
+                v-show="$q.screen.gt.sm"
+                id="select-field"
+                for="select-field"
+                class="col q-ml-sm"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label:
+                      v.value === 'name'
+                        ? $t('general.name', { msg: $t('flow.title') })
+                        : $t(v.label),
+                  }))
+                "
+                :display-value="$t('general.displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                v-model="fieldSelected"
+                option-label="label"
+                option-value="value"
+                autocomplete="off"
+                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>
+
+        <!-- SEC: body content -->
+        <article
+          v-if="propertyData.length === 0"
+          class="col surface-2 flex items-center justify-center"
+        >
+          <NoData
+            v-if="pageState.total !== 0"
+            :not-found="!!pageState.inputSearch"
+          />
+
+          <CreateButton
+            v-if="pageState.total === 0"
+            @click=""
+            label="general.add"
+            :i18n-args="{ text: $t('flow.title') }"
+          />
+        </article>
+
+        <article v-else class="col q-pa-md surface-2 scroll full-width">
+          <q-infinite-scroll
+            :offset="10"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || propertyPage === propertyPageMax) return;
+                propertyPage = propertyPage + 1;
+                fetchPropertyList().then(() =>
+                  done(propertyPage >= propertyPageMax),
+                );
+              }
+            "
+          >
+            <q-table
+              flat
+              bordered
+              :grid="pageState.gridView"
+              :rows="propertyData"
+              :columns="columns"
+              class="full-width"
+              card-container-class="q-col-gutter-md"
+              row-key="name"
+              :rows-per-page-options="[0]"
+              hide-pagination
+              :visible-columns="fieldSelected"
+            >
+              <template #header="{ cols }">
+                <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
+                  <q-th
+                    v-for="v in cols"
+                    :key="v"
+                    :class="{
+                      'text-left': v.name === 'name',
+                      'text-right': v.name === 'step',
+                    }"
+                  >
+                    {{
+                      v.label &&
+                      $t(v.label, {
+                        msg:
+                          v.name === 'step'
+                            ? $t('flow.step')
+                            : v.name === 'name'
+                              ? $t('flow.title')
+                              : '',
+                      })
+                    }}
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+
+              <template #body="props">
+                <q-tr
+                  :class="{
+                    'app-text-muted': props.row.status === 'INACTIVE',
+                    'status-active': props.row.status !== 'INACTIVE',
+                    'status-inactive': props.row.status === 'INACTIVE',
+                  }"
+                  :style="
+                    props.rowIndex % 2 !== 0
+                      ? $q.dark.isActive
+                        ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                        : `background: #f9fafc`
+                      : ''
+                  "
+                >
+                  <q-td
+                    v-if="fieldSelected.includes('order')"
+                    class="text-center"
+                  >
+                    {{
+                      $q.screen.xs
+                        ? props.rowIndex + 1
+                        : (propertyPage - 1) * propertyPageSize +
+                          props.rowIndex +
+                          1
+                    }}
+                  </q-td>
+                  <q-td v-if="fieldSelected.includes('name')">
+                    <section class="row items-center no-wrap">
+                      <q-avatar
+                        class="q-mr-sm"
+                        size="md"
+                        style="
+                          color: var(--gray-6);
+                          background: hsla(var(--gray-6-hsl) / 0.1);
+                        "
+                      >
+                        <q-icon name="mdi-cogs" />
+
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 8px;
+                            min-height: 8px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
+                      </q-avatar>
+                      {{ props.row.name }}
+                    </section>
+                  </q-td>
+                  <q-td
+                    v-if="fieldSelected.includes('step')"
+                    class="text-right"
+                  >
+                    {{ props.row.step.length }}
+                  </q-td>
+                  <q-td style="width: 20%" class="text-right">
+                    <q-btn
+                      icon="mdi-eye-outline"
+                      :id="`btn-eye-${props.row.name}`"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop="() => {}"
+                    />
+                    <KebabAction
+                      :id-name="props.row.name"
+                      :status="props.row.status"
+                      @view="() => {}"
+                      @edit="() => {}"
+                      @delete="() => {}"
+                      @change-status="() => {}"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+
+              <template v-slot:item="props">
+                <section class="col-12 col-md-4 column">
+                  <div
+                    :class="{
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    class="surface-1 rounded bordered row no-wrap col"
+                    style="overflow: hidden"
+                  >
+                    <div
+                      class="col-md-2 col-3 flex items-center justify-center"
+                      style="
+                        color: var(--gray-6);
+                        background: hsla(var(--gray-6-hsl) / 0.1);
+                      "
+                    >
+                      <q-icon name="mdi-cogs" size="md" />
+                    </div>
+                    <article class="row q-pa-sm q-gutter-y-sm col">
+                      <div
+                        v-if="fieldSelected.includes('name')"
+                        class="text-weight-bold col-12 ellipsis-2-lines"
+                        :class="{
+                          'app-text-muted': props.row.status === 'INACTIVE',
+                        }"
+                      >
+                        {{ props.row.name }}
+
+                        <q-tooltip>
+                          {{ props.row.name }}
+                        </q-tooltip>
+                      </div>
+                      <div
+                        v-if="fieldSelected.includes('step')"
+                        class="self-end"
+                      >
+                        <div class="bordered rounded q-px-sm">
+                          <q-icon
+                            name="mdi-note-edit-outline"
+                            class="q-pr-sm"
+                          />
+                          {{ props.row.step.length }}
+                        </div>
+                      </div>
+                    </article>
+                    <nav class="q-pa-sm row items-center self-start">
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="() => {}"
+                      />
+                      <KebabAction
+                        :id-name="props.row.id"
+                        :status="props.row.status"
+                        @view="() => {}"
+                        @edit="() => {}"
+                        @delete="() => "
+                        @change-status="() => "
+                      />
+                    </nav>
+                  </div>
+                </section>
+              </template>
+            </q-table>
+
+            <template v-slot:loading>
+              <div
+                v-if="$q.screen.lt.sm && propertyPage !== propertyPageMax"
+                class="row justify-center"
+              >
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
+            </template>
+          </q-infinite-scroll>
+        </article>
+
+        <!-- SEC: footer content -->
+        <footer
+          class="row justify-between items-center q-px-md q-py-sm surface-2"
+          v-if="propertyPageMax > 0 && $q.screen.gt.xs"
+        >
+          <div class="col-4">
+            <div class="row items-center no-wrap">
+              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+                {{ $t('general.recordPerPage') }}
+              </div>
+              <div><PaginationPageSize v-model="propertyPageSize" /></div>
+            </div>
+          </div>
+          <div class="col-4 row justify-center app-text-muted">
+            {{
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: propertyData.length,
+                    total: pageState.inputSearch
+                      ? propertyData.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: propertyData.length,
+                    total: pageState.inputSearch
+                      ? propertyData.length
+                      : pageState.total,
+                  })
+            }}
+          </div>
+          <nav class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="propertyPage"
+              v-model:max-page="propertyPageMax"
+              :fetch-data="() => {}"
+            />
+          </nav>
+        </footer>
+      </div>
+    </section>
+  </div>
+</template>
 <style scoped></style>
diff --git a/src/stores/property/index.ts b/src/stores/property/index.ts
new file mode 100644
index 00000000..93109146
--- /dev/null
+++ b/src/stores/property/index.ts
@@ -0,0 +1,71 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { api } from 'src/boot/axios';
+import { PaginationResult } from 'src/types';
+import { Status } from '../types';
+import { Property } from './types';
+
+export const useProperty = defineStore('property-store', () => {
+  const data = ref<Property[]>([]);
+  const page = ref<number>(1);
+  const pageMax = ref<number>(1);
+  const pageSize = ref<number>(30);
+
+  async function getProperty(id: string) {
+    const res = await api.get<Property[]>(`/property/${id}`);
+
+    if (res.status >= 400) return null;
+
+    return res.data;
+  }
+
+  async function getPropertyList(params?: {
+    page?: number;
+    pageSize?: number;
+    query?: string;
+    status?: Status;
+    activeOnly?: boolean;
+  }) {
+    const res = await api.get<PaginationResult<Property[]>>('/property', {
+      params,
+    });
+
+    if (res.status >= 400) return null;
+
+    return res.data;
+  }
+
+  async function creatProperty(data: Property) {
+    const res = await api.post<Property>('/property', data);
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  async function editProperty(data: Property & { id: string }) {
+    const res = await api.put<Property>(`/property/${data.id}`, {
+      ...data,
+      id: undefined,
+    });
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  async function deleteProperty(id: string) {
+    const res = await api.delete<Property>(`/property/${id}`);
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  return {
+    data,
+    page,
+    pageSize,
+    pageMax,
+
+    getProperty,
+    getPropertyList,
+    creatProperty,
+    editProperty,
+    deleteProperty,
+  };
+});
diff --git a/src/stores/property/types.ts b/src/stores/property/types.ts
new file mode 100644
index 00000000..778b6504
--- /dev/null
+++ b/src/stores/property/types.ts
@@ -0,0 +1,5 @@
+export type Property = {
+  name: string;
+  nameEn: string;
+  type: Record<string, any>;
+};