diff --git a/src/components/05_buy-sale/MainDialog.vue b/src/components/05_buy-sale/MainDialog.vue
new file mode 100644
index 00000000..fe59cc7c
--- /dev/null
+++ b/src/components/05_buy-sale/MainDialog.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import AppBox from '../app/AppBox.vue';
+
+defineProps<{
+  width?: string;
+  maxWidth?: string;
+  close?: (...args: unknown[]) => void;
+}>();
+
+const dialogState = defineModel('state', { default: true });
+</script>
+
+<template>
+  <q-dialog v-model="dialogState">
+    <AppBox
+      style="
+        padding: 0;
+        border-radius: var(--radius-2);
+        max-height: 100%;
+        flex-wrap: nowrap;
+      "
+      :style="{
+        width: width ?? '100%',
+        maxWidth: maxWidth ?? '98%',
+      }"
+      class="column"
+    >
+      <div class="row items-center q-py-sm q-px-md bordered-b">
+        <div style="flex: 1"><slot name="title" /></div>
+        <div>
+          <q-btn
+            round
+            flat
+            icon="mdi-close"
+            padding="xs"
+            class="close-btn"
+            :class="{ dark: $q.dark.isActive }"
+            v-close-popup
+          />
+        </div>
+      </div>
+      <div
+        class="dialog-body"
+        style="
+          flex: 1;
+          max-height: calc(100vh - 200px);
+          overflow-y: auto;
+          position: relative;
+        "
+      >
+        <slot />
+      </div>
+      <div
+        class="row items-center q-py-sm q-px-md bordered-t"
+        v-if="$slots.footer"
+      >
+        <slot name="footer" />
+      </div>
+    </AppBox>
+  </q-dialog>
+</template>
+
+<style scoped>
+.close-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsla(var(--negative-bg) / 0.1);
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
+
+.dialog-body > :deep(*) {
+  max-height: calc(100vh - 200px);
+}
+</style>
diff --git a/src/components/05_buy-sale/WorkerItem.vue b/src/components/05_buy-sale/WorkerItem.vue
new file mode 100644
index 00000000..2edacee6
--- /dev/null
+++ b/src/components/05_buy-sale/WorkerItem.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+defineProps<{
+  data: {
+    no: number;
+    refNo: string;
+    fullName: string;
+    birthDate: string;
+    age: string;
+    nationality: string;
+    docExpireDate: string;
+  };
+  color?: 'male' | 'female' | 'none';
+}>();
+</script>
+<template>
+  <div
+    class="surface-1 rounded row bordered worker-item items-center"
+    :class="{
+      'worker-item__male': color === 'male',
+      'worker-item__female': color === 'female',
+    }"
+    style="padding-block: var(--size-2)"
+  >
+    <div class="col-1 text-center">{{ data.no }}</div>
+    <div class="col-2 text-center">{{ data.refNo }}</div>
+    <div class="col-3">{{ data.fullName }}</div>
+    <div class="col-1">{{ data.birthDate }}</div>
+    <div class="col-1 text-center">{{ data.age }}</div>
+    <div class="col-1 text-center">{{ data.nationality }}</div>
+    <div class="col-2 text-center">{{ data.docExpireDate }}</div>
+    <div class="col-1 text-center">
+      <q-btn
+        id="btn-delete-work"
+        icon="mdi-trash-can-outline"
+        dense
+        flat
+        round
+        size="12px"
+        color="negative"
+        @click="$emit('delete')"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.worker-item {
+  --side-color: var(--brand-1);
+  position: relative;
+  overflow-x: hidden;
+
+  &.worker-item__female {
+    --side-color: hsl(var(--gender-female));
+  }
+
+  &.worker-item__male {
+    --side-color: hsl(var(--gender-male));
+  }
+}
+
+.worker-item::before {
+  position: absolute;
+  content: ' ';
+  left: 0;
+  width: 7px;
+  top: 0;
+  bottom: 0;
+  background: var(--side-color);
+}
+</style>
diff --git a/src/pages/05_buy-sale/MainPage.vue b/src/pages/05_buy-sale/MainPage.vue
new file mode 100644
index 00000000..1b141e7f
--- /dev/null
+++ b/src/pages/05_buy-sale/MainPage.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import QuatationForm from './QuatationForm.vue';
+</script>
+
+<template>
+  <QuatationForm />
+</template>
+
+<style scoped></style>
diff --git a/src/pages/05_buy-sale/QuatationForm.vue b/src/pages/05_buy-sale/QuatationForm.vue
new file mode 100644
index 00000000..2e25a13c
--- /dev/null
+++ b/src/pages/05_buy-sale/QuatationForm.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
+
+import MainDialog from 'src/components/05_buy-sale/MainDialog.vue';
+import WorkerItem from 'src/components/05_buy-sale/WorkerItem.vue';
+import AppBox from 'src/components/app/AppBox.vue';
+
+const dialogState = ref(true);
+
+const selectedBranchIssuer = ref('');
+const selectedCustomer = ref('');
+const toggleWorker = ref(true);
+</script>
+
+<template>
+  <MainDialog v-model:state="dialogState">
+    <template #title>{{ $t('quatationAddTitle') }}</template>
+
+    <div class="row q-pa-md items-center">
+      <div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
+      <q-select
+        v-model="selectedBranchIssuer"
+        :options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
+        :label="$t('buySaleFormSelectBranchIssuer')"
+        id="select-branch-issuer"
+        for="select-branch-issuer"
+        style="width: 300px"
+        class="q-mr-md"
+        outlined
+        dense
+      />
+      <q-select
+        v-model="selectedCustomer"
+        :options="[{ label: 'Customer 1', value: 'Customer 1' }]"
+        :label="$t('buySaleFormSelectCustomer')"
+        id="select-customer"
+        for="select-customer"
+        style="width: 300px"
+        outlined
+        dense
+      />
+    </div>
+
+    <div
+      class="surface-2 bordered-t row"
+      style="align-items: stretch; overflow-y: auto"
+    >
+      <div
+        class="col-12 col-sm-9 row items-stretch"
+        style="padding: var(--size-3)"
+      >
+        <AppBox
+          class="full-width"
+          bordered
+          style="
+            padding: var(--size-3);
+            max-height: calc(100vh - 300px - var(--size-3) * 2);
+            overflow-y: auto;
+          "
+        >
+          <div class="row items-center q-mb-sm">
+            <span style="flex: 1">
+              {{ $t('buySaleListCustomer') }}
+              <q-toggle
+                v-model="toggleWorker"
+                id="toggle-status"
+                size="md"
+                padding="none"
+                class="q-ml-md"
+                dense
+              />
+            </span>
+            <button
+              id="add-btn-plus"
+              class="row items-center"
+              style="border: none; background: transparent"
+            >
+              <Icon
+                height="24"
+                icon="pixelarticons:plus"
+                class="app-text-info cursor-pointer"
+              />
+            </button>
+          </div>
+
+          <AppBox class="surface-2 worker-list" bordered>
+            <WorkerItem
+              :data="{
+                no: 1,
+                refNo: 'CC6613334',
+                nationality: 'Thai',
+                birthDate: '1 May 2001',
+                age: '23 Years',
+                fullName: 'Methapon Metanipat',
+                docExpireDate: '16 May 2025',
+              }"
+              color="male"
+            />
+            <WorkerItem
+              :data="{
+                no: 1,
+                refNo: 'CC6613334',
+                nationality: 'Thai',
+                birthDate: '1 May 2001',
+                age: '23 Years',
+                fullName: 'Methapon Metanipat',
+                docExpireDate: '16 May 2025',
+              }"
+              color="male"
+            />
+          </AppBox>
+        </AppBox>
+      </div>
+      <div
+        class="col-12 col-sm-3"
+        style="
+          padding: var(--size-3);
+          padding-left: 0;
+          overflow-y: auto;
+          max-height: calc(100vh - 300px);
+        "
+      >
+        <AppBox bordered class="column" style="gap: var(--size-3)">
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationNo') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationDate') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationTime') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationTx') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationName') }}
+          </div>
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationNo') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationDate') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationTime') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationTx') }}
+          </div>
+
+          <div class="rounded bordered q-px-md q-py-sm">
+            {{ $t('buySaleQuatationName') }}
+          </div>
+        </AppBox>
+      </div>
+    </div>
+
+    <template #footer>
+      <q-btn color="primary" dense label="asd" class="q-px-md"></q-btn>
+    </template>
+  </MainDialog>
+</template>
+
+<style scoped>
+.worker-list > :deep(*:not(:last-child)) {
+  margin-bottom: var(--size-2);
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index cc25e9bb..2790a62f 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -31,6 +31,11 @@ const routes: RouteRecordRaw[] = [
         name: 'productAndService',
         component: () => import('pages/04_product-service/MainPage.vue'),
       },
+      {
+        path: '/buy-sale',
+        name: 'BuySale',
+        component: () => import('pages/05_buy-sale/MainPage.vue'),
+      },
     ],
   },